Question

所以，我有以下HTML：

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

当我用class toolsIndexSelectContainer点击周围的div时，我想选择下拉并显示里面的项目。我有这个jQuery：

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

但是，focus（）不起作用。我试过点击（），Chrome就爆炸了。有没有办法做到这一点？

Answer 1

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

其他选项是下载基本模拟select功能的下拉插件。

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

选择您可以使用插件的开放式方法$('#demoSetSelected').ddslick('open');来打开下拉选项。

Answer 2

你可以使用jquery Combobox之类的东西。将选择转换为组合框。否则，使用普通的选择元素

是不可能的

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/

上练习练习

你如何用jQuery做一个选择下拉列表？

3 个答案: