选择的下拉列表保持焦点

Question

我有一个实现了 Chosen 插件的下拉列表。选择一个选项后，光标应该放在同一页上的文本框中。我正在尝试使用下拉菜单的 onChange 属性来完成此操作，但它不起作用。 onChange 事件正在触发，但焦点停留在下拉菜单上。

当我禁用 Chosen 时，它工作得很好。所以我知道是插件的问题，但是不知道具体是什么问题

为什么选择下拉菜单阻止 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>

Answer 1

这似乎是最近几个版本的问题。这些已被解决 Here and mainly Here. The workaround simply adds a setTimeout 从 Chosen 元素中删除选定的 class，并稍等片刻（足以让下一个循环执行）然后聚焦：

$("select").chosen().on('change', function(evt, params) {
    setTimeout(function(){
        $(this).removeClass('chosen-container-active');
        $('#additionalDetails').focus();
    }, 0);
});

鉴于您的标记的性质（您使用的是 Razor），我建议在您的 JavaScript 中加入它以提高可读性。

JSFiddle: http://jsfiddle.net/q22vy16j/

选择的下拉列表保持焦点

Chosen dropdown is holding focus

javascript

asp.net

jquery

jquery-chosen

jquery-events