如何动态触发选择下拉菜单答案

【问题标题】：how to dynamically trigger select dropdown如何动态触发选择下拉菜单
【发布时间】：2016-07-27 15:40:11
【问题描述】：

如何动态触发选择下拉菜单以打开值，除了将属性值更改为选项值的长度。我想动态触发选择下拉菜单（右箭头），有什么办法吗？

HTML:

      <div>
        <input type="text" />
      </div>
      <div>
        <select id="testSelect" onfocus="openDrpDown(this)" onblur="closeDrpDown(this)">
            <option>11111</option>
            <option>222222</option>
            <option>444444444</option>
            <option>55555</option>
        </select>
      </div>

Script:
function openDrpDown(){
    //var myDropDown=$("#testSelect");
    //var length = $('#testSelect > option').length;
    //open dropdown
    //myDropDown.attr('size',length);
    $("#testSelect").click();
}

function closeDrpDown(){
    //var myDropDown=$("#testSelect");
    //var length = $('#testSelect > option').length;
    //close dropdown
    //myDropDown.attr('size',0);
}

【问题讨论】：

您想要获取 select 的值还是其他什么？
请参考stackoverflow.com/questions/10547622/…
Simulate click event on select (not working for IE and FF)的可能重复

标签： javascript jquery angularjs

【解决方案1】：

您可以为这个选择框设置两个属性，data-selectSize 是两个选项的总数，size 是选项的长度。我们将更新此size onfocus 和onblur。

我们还需要tabindex，它指示元素是否可以获取输入焦点。

  function openDrpDown(elem) {
   $(elem).attr("size", $(elem).attr("data-selectSize"));
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";

    $(options).fadeTo(50, 0);
  };


function closeDrpDown(elem) {
    $(elem).attr("size", 1);
    var options = "select[tabindex='" + +$(elem).attr('tabindex') + 1 + "']";
    $(options).fadeTo('fast', 1.0);
  };

JSFIDDLE

【讨论】：

感谢您的宝贵时间，但我已经尝试过了，为什么除了这个解决方案之外我问的问题本身是任何其他方式来实现这一目标？原因是 - 在焦点上它打开但它的行为不像其他原生选择组件，一旦我们在按下 enter 时选择了选项，它不会关闭，因为我们写了 onblur 它关闭焦点......jsfiddle.net/84a4drf5/1 - 我在尝试触发就像鼠标点击选择右箭头 - 动态？有什么想法吗？

【解决方案2】：

  function tr_click(){
     $("#testSelect").trigger("click");
}

在任何你想要的地方调用它，如果你想在页面加载时打开它，通过 body 标签调用它<body onload="tr_click()"></body>

【讨论】：