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

Answer 2

在选择框上使用val()，而不是更改选项上的attr：

$('.dropdown-list li').click(function(){
    var listvalue = $(this).index();
    $('#edit-type').val(listvalue);
});

Answer 3

你应该使用val（）; （我假设你的选择有id=edit-type）

$('.dropdown-list li').click(function(){
    $('#edit-type').val($(this).index());

});

有没有更快捷的方法在下拉列表中设置所选值？

3 个答案: