Выберите автоматическое обновление списка при любых изменениях?

Question

У меня есть jQuery, который, когда вы нажимаете на опцию выбора, показывает следующий, но вы должны щелкнуть, вы не можете использовать стрелку вниз или «вкладку» для следующего параметра. Мне интересно, какие варианты я должен сделать для этой работы?

Вот мой JQuery:

function typefunction() 
    { 
    var itemTypes = jQuery('#type'); 
    var select = this.value; 
    itemTypes.change(function() { 
     if ($(this).val() == '1-Hand') { 
      $('.1-Hand').show(); 
      $('.2-Hand').hide(); 
      $('.off').hide(); 
      $('.Armor').hide(); 
     } 
     else $('.1-Hand').hide(); 
     if ($(this).val() == '2-Hand') { 
      $('.2-Hand').show(); 
      $('.1-Hand').hide(); 
      $('.off').hide(); 
      $('.Armor').hide(); 
     } 
     else $('.2-Hand').hide(); 
     if ($(this).val() == 'Armor') { 
      $('.Armor').show(); 
      $('.2-Hand').hide(); 
      $('.off').hide(); 
      $('.1-Hand').hide(); 
     } 
     else $('.Armor').hide(); 
     if ($(this).val() == 'Off-Hand') { 
      $('.Off').show(); 
      $('.2-Hand').hide(); 
      $('.1-Hand').hide(); 
      $('.Armor').hide(); 
     } 
     else $('.Off').hide(); 
     if ($(this).val() == '1-Hand') { 
      $('.one-hand-dps').show(); 
      $('.item-armor').hide(); 
      $('.two-hand-dps').hide(); 
     } 
     else $('.one-hand-dps').hide(); 
     if ($(this).val() == '2-Hand') { 
      $('.two-hand-dps').show(); 
      $('.one-hand-dps').hide(); 
      $('.item-armor').hide(); 
     } 
     else $('.two-hand-dps').hide(); 
     if ($(this).val() == 'Armor') { 
      $('.item-armor').show(); 
      $('.one-hand-dps').hide(); 
      $('.two-hand-dps').hide(); 
     } 
     else $('.item-armor').hide(); 
    }); 
} 

И HTML:

<div class="input-group item"> 
       <span class="input-group-addon">Type</span> 
       <select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();"> 
         <option value="Any Type">Any Type</option> 
         <option value="1-Hand">1-Hand</option> 
         <option value="2-Hand">2-Hand</option> 
         <option value="Armor">Armor</option> 
         <option value="Off-Hand">Off-Hand</option> 
       </select> 
      </div> 
      <div class="input-group item"> 
       <span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span> 
       <select class="1-Hand form-control" name="sub[1]" style="display: none;"> 
         <option value="All 1-Hand Item Types">All 1-Hand Item Types</option> 
         <option>Axe</option> 
         <option>Ceremonial Knife</option> 
         <option>Hand Crossbow</option> 
         <option>Dagger</option> 
         <option>Fist Weapon</option> 
         <option>Mace</option> 
         <option>Mighty Weapon</option> 
         <option>Spear</option> 
         <option>Sword</option> 
         <option>Wand</option> 
       </select> 
       </div> 

      <div class="input-group"> 
       <span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span> 
       <select class="2-Hand form-control" name="sub[2]" style="display: none;"> 
         <option>All 2-Hand Item Types</option> 
         <option>Two-Handed Axe</option> 
         <option>Bow</option> 
         <option>Diabo</option> 
         <option>Crossbow</option> 
         <option>Two-Handed Mace</option> 
         <option>Two-Handed Mighty Weapon</option> 
         <option>Polearm</option> 
         <option>Staff</option> 
         <option>Two-Handed Sword</option> 
       </select> 
       </div> 


       <div class="input-group"> 
       <span class="Armor input-group-addon" style="display: none;">Sub-Type</span> 
       <select class="Armor form-control" name="sub[3]" style="display:none;"> 
         <option>All Armor Item Types</option> 
         <option>Amulet</option> 
         <option>Belt</option> 
         <option>Boots</option> 
         <option>Bracers</option> 
         <option>Chest Armor</option> 
         <option>Cloak</option> 
         <option>Gloves</option> 
         <option>Helm</option> 
         <option>Pants</option> 
         <option>Mighty Belt</option> 
         <option>Ring</option> 
         <option>Shoulders</option> 
         <option>Spirit Stone</option> 
         <option>Voodoo Mask</option> 
         <option>Wizard Hat</option> 
       </select> 
       </div> 

      <div class="input-group"> 
       <span class="Off input-group-addon" style="display: none;">Sub-Type</span> 
       <select class="Off form-control" name="sub[4]" style="display:none;"> 
         <option>All Off-Hand Item Types</option> 
         <option>Mojo</option> 
         <option>Source</option> 
         <option>Quiver</option> 
         <option>Shield</option> 
       </select> 
       </div> 

Answer 1

Если вы используете OnClick атрибут в избранных, то он стоит по причине, что он требует мыши в порядке работать. Попробуйте использовать onchange, например, использование клавиатуры также должно работать.

<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();"> 
    <option value="Any Type">Any Type</option> 
    <option value="1-Hand">1-Hand</option> 
    <option value="2-Hand">2-Hand</option> 
    <option value="Armor">Armor</option> 
    <option value="Off-Hand">Off-Hand</option> 
</select> 

Также см этот question, для получения более подробной информации о том, как обрабатывать как щелчки и ключи сразу.