無法專注於jQuery選擇小部件動態輸入域

基本上我正在擴大這個問題jQuery Combobox/select autocomplete? 在這裏，我已經更新了fiddle code here。問題是，如果我從第一個菜單中遇到了某些條件（如果mainmenu選擇值是兩個），我想在子菜單的輸入字段中設置焦點。這裏是我的代碼： HTML：無法專注於jQuery選擇小部件動態輸入域

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

來源

2014-09-13 nexuscreator

如果您已經使用jQuery-UI，爲什麼不使用'selectmenu'小部件？它更乾淨，不需要任何額外的代碼，並且肯定會消除這個問題。 – DevlshOne 2014-09-13 08:24:28

您需要onchange事件的combobox綁定這樣$("#mainmenu").combobox({...，然後使用$('#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

來源

2014-09-13 09:08:03

使用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舉證

來源

2014-09-13 08:53:30 DevlshOne

無法專注於jQuery選擇小部件動態輸入域

回答

相關問題