javascript - 从 javascript 函数打开下拉列表

Question

我试图在调用 javascript 函数时显示下拉选项。但最终我没有成功。需要帮助这是我的代码：

<script>
function showState(str){ 
$('#Acntname').trigger('click');

}
</script>
...
<select class="input_panel" id="Acntname" > 
<option value="0">Select</option>
<option value="1">Equity Share Capital</option>
<option value="2">Deprication Fund</option>  </select>

<input type="text" class="input_panel" id="accountname" onkeyup="showState(this.value)"/>

我使用触发功能打开下拉菜单，但它不起作用。

Answer 1

给你..你可以通过在下拉列表中调度 mousedown 事件来做到这一点..

演示小提琴

JS：

window.showState = function (str) {
    var dropdown = document.getElementById('Acntname');
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
}

编辑：这在Chrome <53中完美运行，不确定 Firefox 和 IE。

Answer 2

你可以这样做：

var sel = document.getElementById('Acntname');
var len = sel.options.length;

sel.setAttribute('size', len);

将大小设置回 1 以关闭它

Answer 3

这是不可能toggle的drop down。triggering other element

如果您想选择select boxon keyup eventof的值，请textbox尝试以下操作，

function showState(str){ 
   //  alert(str);
   $('#Acntname option[value="'+str+'"]').prop('selected',true);
}

演示

Answer 4

您无法打开下拉列表，但有一个半解决方案您可以执行以下操作

“打开”列表：

$("#Acntname").attr("size","3");

和

$("#Acntname").attr("size","1");

关闭列表。