I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?

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

And the 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>