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

当我禁用选择时,它可以完美运行。因此,我知道它与该插件有关,但我不知道确切的问题是什么。

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

最佳答案

似乎这是最近几个版本的问题。这些已在Here中解决,主要是Here。解决方法仅添加一个setTimeout即可从Chosen元素中删除所选的类,然后稍等一会(足以执行下一个循环),然后集中精力:

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


考虑到标记的性质(正在使用Razor),我建议在JavaScript中使用它来提高可读性。

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

关于javascript - 选择的下拉列表保持焦点,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32186355/

10-11 12:48
查看更多