Question

我有一个jQuery，当你点击一个选择选项它会显示下一个，但是你必须点击，你不能只使用向下箭头或“tab”到下一个选项。我想知道我有什么选择让这项工作？

这是我的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，了解有关如何立即处理点击次数和密钥的详细信息。

选择列表自动更新任何类型的更改？

1 个答案: