Unable to focus on jquery select widget dynamic input field

Question

Basically I'm extending this question jQuery Combobox/select autocomplete? Here, I have updated the fiddle code here. The problem is that, if I met certain condition from the first menu(if the mainmenu selection value is two), I want to set focus in the input field in the the submenu. Here is my code: 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>

Script:

$(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();
            }
        });
});

If you're already using jQuery-UI, why not use the `selectmenu` widget? It's cleaner, doesn't require any extra code and will eliminate this issue for sure. — DevlshOne, Sep 13 '14 at 08:24

score 1 · Answer 1 · answered Sep 13 '14 at 08:53

Using jQuery-UI's 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>

JS

$(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();
            }
        }
    });
});

And here's the JSFiddle for proof

score 1 · Accepted Answer · answered Sep 13 '14 at 09:08

You need to bind onchange event of combobox like this $("#mainmenu").combobox({... and then set focus using $('#submenu').next().find('input').focus();

Here's complete code:

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

DEMO

Unable to focus on jquery select widget dynamic input field

2 Answers2