在按钮上单击触发或模拟 select 下拉列表显示

Question

我正在寻找一种在单击按钮时打开 select 选项（就像我们单击 select）的方法。像这个例子：

HTML 代码在这里：

<select id="sel1">
    <option value="">Please select an option</option>
    <option value="1">Val1</option>
    <option value="2">Val2</option>
    <option value="3">Val3</option>
</select>
<button id="btn">fire</button>

https://jsfiddle.net/stefchrif/2vz7fog3

Answer 1

您需要使用点击事件，然后找到值为“option[value="2"]”的选项，然后将 prop selected 设置为 true

https://api.jquery.com/prop/

// click on button
$('#btn').click( function() {
  //$('#sel1').find('option[value="2"]').prop('selected', true);
  var size = $('#sel1 option').length;
  if (size != $("#sel1").prop('size')) {
      $("#sel1").prop('size', size);
  } else {
      $("#sel1").prop('size', 1);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1">
    <option value="">Please select an option</option>
    <option value="1">Val1</option>
    <option value="2">Val2</option>
    <option value="3">Val3</option>
</select>
<button id="btn">fire</button>

在按钮上单击触发或模拟 select 下拉列表显示

on button click fire or simulate select dropdown list show

jquery

select

simulate

dropdown