Question

我有一个按钮和一个选择框。我想通过单击按钮打开下拉菜单。

<button id="showDropdown"></button>
<select id="selectME">
  <option>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

我尝试了以下js脚本：

$("#showDropdown").click(function(){
  $("#selectME").click(); 
});

这对我不起作用。请帮忙。

Answer 1

您可以克隆<select>元素，将其附加到body并显示它。

$('#showDropdown').click(function(){
  var select = $('#selectME');
  
  var clone = select.clone().removeAttr('id');
  
  clone.val(select.val()).css({
      overflow: 'auto',
      position: 'absolute',
      left: select.offset().left,
      top: select.offset().top + select.outerHeight(),
      width: select.outerWidth()
  });
        
  clone.attr('size', clone.find('option').length)
  
  clone.change(function() {
      select.val(clone.val());
  });
        
  clone.on('click blur keypress',function(e) {
   if(e.type !== 'keypress' || e.which === 13)
      $(this).remove();
  });
  
  clone.appendTo('body').focus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="showDropdown">Select me</button>
<select id="selectME">
  <option>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

如何使用jQuery显示选择下拉列表？

1 个答案: