0

選択オプションをクリックすると次のオプションが表示される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>
4

1 に答える 1

0

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

クリックとキーの両方をすぐに処理する方法の詳細については、この質問も参照してください。

于 2013-11-09T21:59:34.363 に答える