我需要添加一个下拉列表,当开始输入某个单词时,可以在其中动态过滤选项(正是 Chosen 所做的)并且 span
始终显示在每个选项之前,类似于 Google 云端硬盘搜索栏:
(在这个例子中显示了图标,但我只需要显示一个span
标签)
“始终显示”的意思是 span 标签应该在下拉列表的初始显示时显示,而且当选项列表开始被过滤时,或者当一个选项被选中时。
对于 Chosen,我尝试这样做:
$select.on("chosen:showing_dropdown", function() {
$(".chosen-results").find('li').each(function(index) {
if(index !== 0) { // ignore the "prompt" li
var courseName = $(this).html();
$(this).html("<span style='color: red'>foo</span> " + courseName);
}
});
});
它在 Chosen 首次显示下拉列表时有效,但一旦我开始输入内容,过滤后的结果列表就会丢失我的 span
标签。我找不到 a chosen event当列表开始被过滤时触发。
有没有办法通过 Chosen 或任何其他类似插件实现我的需求?
最佳答案
如果我正确理解了您的问题,那么在 <li>
中你想把你的跨度元素?尝试以下:
$select.on("chosen:showing_dropdown", function() {
$(".chosen-results").find('li').each(function(index) {
if(index !== 0) { // ignore the "prompt" li
var courseName = $(this).html();
$(this).prepend("<span style='color: red'>foo</span> " + courseName);
}
});
});
关于javascript - 如何使用 Chosen 或其他下拉插件在选项名称之前显示额外的跨度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34437791/