我有一个实现所选插件的下拉列表。当选择一个选项时,光标应该放在同一页面上的文本框中。我试图使用下拉菜单的onChange
属性来实现这一点,但它不起作用。onChange
事件正在被触发,但是焦点仍然在下拉菜单上。
当我禁用selected时,它工作得很好。所以我知道这与插件有关,但我不知道确切的问题是什么。
为什么选择下拉菜单阻止jQuery切换焦点?
相关HTML:
<!--Unrelated code has been removed-->
<div class="mws-form-col-8-8 ">
<div class="mws-form-item large">
@Html.DropDownList("addOtherProvision" + chargeId, Model.otherProvisionDropdown, "",
new { onchange = "$('#additionalDetails').focus();",
id = "addOtherProvision" + chargeId })
</div>
</div>
<div id= "@(chargeId)otherProvisionDialog" class="mws-panel-body"
title="Add Additional Details">
<div class="mws-form-cols clearfix">
<div class="mws-form-item large">
@Html.TextBox("additionalDetails", "", new {id = "additionalDetails",
@class = "mws-textinput" })
</div>
</div>
</div>
似乎这是最近几个版本的一个问题。这些问题在这里讨论过,主要在这里讨论过。解决方法只是添加一个setTimeout,从selected元素中移除选中的类,然后等待一会儿(足够执行下一个循环),然后聚焦:
$("select").chosen().on('change', function(evt, params) {
setTimeout(function(){
$(this).removeClass('chosen-container-active');
$('#additionalDetails').focus();
}, 0);
});
考虑到你的标记的性质(你正在使用Razor),我建议在你的JavaScript中使用这个来提高可读性。
JSFiddle : http://jsfiddle.net/q22vy16j/