選擇列表自動更新的任何類型的變化？

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，有關如何立即處理點擊和按鍵的詳細信息。