javascript - 有没有更快的方法来设置下拉列表中的选定值？

Question

我有一个下拉列表和一个选择列表。两者都包含很多相同的项目。基本上，我是根据已单击的列表项索引设置下拉列表的选定值。

代码是:

$('.dropdown-list li').click(function(){
    $('#edit-type option').removeAttr('selected', 'selected');
    var listvalue = $(this).index();
    $('#edit-type option').eq(listvalue).attr('selected', 'selected');
});

这行得通，但速度很慢。在选择下拉选项之前有 3/4 秒的延迟。

有没有更快的方法来做到这一点？

编辑:

<select id="edit-type" name="type" class="form-select" style="display: none; ">
<option value="All">- Any -</option>
<option value="171">item Name 1 </option>
<option value="172" selected="selected">item Name 2</option>
</select>

<ul class="dropdown-list">
<li><div><span>item Name 1</span></div></li>
<li class="selected"><div><span>item Name 2</span></div></li>
</ul>

我这样做的原因是我可以创建一个样式化的下拉菜单。

谢谢 罗伯特

Answer 1

如果这么慢，您可能在列表中有很多项目。最快的方法应该是直接设置选择的索引:

$('.dropdown-list li').click(function(){
    var oDDL = $('#edit-type');
    if (oDDL.length > 0)
        oDDL[0].selectedIndex = $(this).index();
});

如果你真的有很多项目，使用 .on() 会更好，它将在幕后创建单个处理程序，而不是为每个列表项创建处理程序:

$('.dropdown-list').on('click', 'li', function() {
    //...
});

Live test case .