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

Select list auto update on any kind of change?

本文关键字:类型 任何 更新 列表 选择      更新时间:2023-09-26

我有一个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>

如果您在选择中使用 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>

另请参阅此问题,了解有关如何立即处理单击和键的更多详细信息。

相关文章: