如何使用jQuery创建一个选择下拉列表？

Question

因此，我有以下HTML：

<div class="toolsIndexSelectContainer">
      <select id="Clients" class="toolsIndexSelect disableElement">
          <option>Item</option>         
          <option>Item 2</option> 
          <option>Item 3</option> 
      </select>
</div>

当我使用类toolsIndexSelectContainer单击周围的div时，我希望选择下拉菜单并显示其中的项。我有这个jQuery：

$("div[class~='toolsIndexSelectContainer']").click(function () {
    $(this).children("select").focus();
});

但是，focus()不起作用。我试了一下click()，Chrome就在我身上炸开了。有没有办法做到这一点？

Answer 1

不能，您不能在select元素上执行此操作。您不能触发以显示下拉选项。

另一种选择是下载一个基本上模拟select特性的下拉插件。

这个ddSlick插件似乎模拟了选择框属性，并且有一个打开下拉选项的方法。

你可以使用像$('#demoSetSelected').ddslick('open');这样的插件打开方法来打开下拉选项。

Answer 2

你可以使用类似jquery的Combobox。若要将选择转换为组合框，请执行以下操作。否则，对于普通的select元素，这是不可能的。

Answer 3

这是一个小技巧，但似乎是有效的：

$(".toolsIndexSelectContainer").click(function () {
    $(this).find("#Clients").focus();
});
$("#Clients").focus(function(){
    this.size=$(this).find('option').length;
}).blur(function(){
    this.size=1;
});

练习小提琴：http://jsfiddle.net/As93t/