Question

如何使用不同的按钮显示选择选项标签中的选项

我有一个div或另一个按钮。我需要从此按钮查看我的选择标记中的选项列表

我的选择标签是：

<select>
      <option value="0" selected="selected">Choose a class...</option>
      <option value="1" >2</option>
      <option value="2" >3</option>
      <option value="3" >4</option>
</select>

然后是我的另一个按钮（如果我单击该按钮，则应该从上方看到该选项列表）（在上面的位置）

   <button>My button</button>

Answer 1

似乎没有办法像默认选择打开操作那样打开选择。

但是还有另一种方式可以满足您的要求。

以下是通过更改select options属性来打开size的示例。

var select = document.getElementsByTagName('select')[0];
var button = document.getElementsByTagName('button')[0];

button.addEventListener("click", function(){
  var size = select.getAttribute("size");
  
  if(size == null || size == 0){
    // you can determine the height of opening select
    select.setAttribute("size", 5);
  }
  else{
    select.setAttribute("size", 0);
  }
}, false);

select.addEventListener("change", function(){
    this.setAttribute("size", 0);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
      <option value="0" selected="selected">Choose a class...</option>
      <option value="1" >2</option>
      <option value="2" >3</option>
      <option value="3" >4</option>
</select>

<button>My button</button>

如何使用多个按钮触发选择标签选项列表

1 个答案: