Select list auto update on any kind of change?

Question

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>

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.

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

Also see this question, for more details about how to handle both clicks and keys immediately.

edited May 23 '17 at 10:25

Community

1
1

answered Nov 09 '13 at 21:59

t0mppa

3,983
5
37
48

It is working so far, is there a way to do it if i hit one of the arrow keys? – Tom Irons Nov 09 '13 at 22:07
Onchange waits for the control to swap out of the element, so you have to tab to another element or click outside the select. You can also use onkeyup, onkeydown and onkeypress, if you need to just be able to change it by pressing one key. Of course they will not fire up anything when you click it on mouse. – t0mppa Nov 09 '13 at 22:10

Select list auto update on any kind of change?

1 Answers1