javascript 以编程方式下拉选择菜单

Question

我正在寻找一种方法，使用 javascript 或 jquery 在单击按钮时自动下拉选择菜单下拉列表。我遇到这个问题，因为我使用的文本字段允许自定义用户输入将字段动态添加到选择输入，并且我不希望用户单击两次，但本质上问题是这样的:

$("#dropDownButton").click(function(){
  //$("#selectBox"). //What goes here???

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="selectBox">
  <option val=1>1</option>
  <option val=2>2</option>
</select>

<button id="dropDownButton">
  Pull Down The Select!
</button>

Answer 1

可能没有方法可以直接执行此操作，但有几种方法可以代替。 喜欢

::使用标签进行选择并触发其点击事件。

::使用.focus() 聚焦到选择的元素。

::最好的方法之一就是进行选择

$('#dropDownButton').click(function() {
        var length = $('#selectBox option').length;
       //open dropdown
        $("#selectBox").prop('size', length);

       // to close

        //$("#selectBox").prop('size', 0);
    });

但是所有这些都是执行操作的替代方法。还有最好的替代方法是使用一组其他元素(例如大多数人使用的 list 和 div)来执行此操作Bootstrap 和 Foundation 等 CSS 框架。

Bootstrap dropdown

Ref