无法专注于 jquery 选择小部件动态输入字段答案

【问题标题】：Unable to focus on jquery select widget dynamic input field无法专注于 jquery 选择小部件动态输入字段
【发布时间】：2014-09-13 17:08:03
【问题描述】：

基本上我正在扩展这个问题jQuery Combobox/select autocomplete? 在这里，我更新了fiddle code here。问题是，如果我从第一个菜单中满足某些条件（如果主菜单选择值为 2），我想在子菜单的输入字段中设置焦点。这是我的代码： HTML：

<select id="mainmenu" style="width:300px">
    <option value>Select from menu</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<select id="submenu" style="width:300px">
    <option value>Select from submenu</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

脚本：

$(function(){
    $('select').combobox();
});

$( document ).ready(function() {

    console.log("console logging.");
    $('#mainmenu').change(function() {
            var selectVal = $('#mainmenu :selected').val();
            console.log("selected: " + selectVal);
            if(selectVal == 'two'){
                console.log("value: "+selectVal);
                //$('#submenu ~ input:first').autocomplete("search", "");
                $('#submenu ~ input:first').focus();
            }
        });
});

【问题讨论】：

如果您已经在使用 jQuery-UI，为什么不使用 selectmenu 小部件？它更干净，不需要任何额外的代码，并且肯定会消除这个问题。

标签： jquery html jquery-widgets

【解决方案1】：

您需要像这样$("#mainmenu").combobox({... 绑定combobox 的onchange 事件，然后使用$('#submenu').next().find('input').focus(); 设置focus

完整代码如下：

$( document ).ready(function() {
$("#mainmenu").combobox({
        selected: function (event, ui) {
           var selectVal = $('#mainmenu :selected').val();
            if(selectVal=='two'){
             $('#submenu').next().find('input').focus();
            }
        }
    });
});

DEMO

【讨论】：

【解决方案2】：

使用 jQuery-UI 的 selectmenu widget:

HTML

<select id="mainmenu" style="width:300px">
    <option value>Select from menu</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>
<select id="submenu" style="width:300px">
    <option value>Select from submenu</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

$(function () {
    $('#mainmenu, #submenu').selectmenu();
    $('#mainmenu').selectmenu({
        'change': function (e, ui) {
            var selectVal = $('option:selected', this).val();
            if (selectVal == 'two') {
                $('#submenu').selectmenu('open');
                $('#submenu option:eq(1)').focus();
            }
        }
    });
});

这是JSFiddle 的证明

【讨论】：