代码之家  ›  专栏  ›  技术社区  ›  Brett Roby

在另一个选择实例中选择时禁用选择选项值

html-select html javascript
  •  0
  • Brett Roby  · 技术社区  · 7 年前

    disable select option value when selected

    如何扩展Michels解?具体来说,我希望得到相同的精确函数,但有11个不同的选项和11个选择组实例。此外,如果有意义的话,我希望有多个实例的多个实例。基本上,一列选择组向下(视觉上)连接在一起,使您无法在该垂直组中选择两个相同的选项,然后移动到右侧的另一列,使用一组新的选择,这些选择不会干扰现有/以前的列选择;在网格模式中不断重复,直到总共有七、八列左右。

    我可以在Excel中做我需要做的事情,但我有一个很有用的应用程序,我在做一些基于浏览器的更好的事情,所以任何可以提供的帮助都表示感谢。

    我还在努力,我得到了一些我需要的东西。我现在的问题是有很多代码,所以我觉得我做得不对。如果我们想在这里或那里改变一些小事情,那么这么多代码实际上是不可持续的,也不容易编辑。

    这可以在浏览器中运行,但似乎不想在JSFIDLE或Plunker中正确运行,所以这里是我的代码位。。。

    Javascript: 

    $(document).ready(function() {
    $(".positions_1").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".positions_1 option").each(function() {
            $(this).show();
        });
        $(".positions_1").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).attr("disabled", true);
            }
        });

    });
});

$(document).ready(function() {
    $(".positions_2").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".positions_2 option").each(function() {
            $(this).show();
        });
        $(".positions_2").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).attr("disabled", true);
            }
        });

    });
});

$(document).ready(function() {
    $(".positions_3").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".positions_3 option").each(function() {
            $(this).show();
        });
        $(".positions_3").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).attr("disabled", true);
            }
        });

    });
});

    HTML: 

        <div class="inning no-print">
  <h1>Player Name</h1>
  <input type="text" class="name_input_1">
  <br>
  <input type="text" class="name_input_2">
  <br>
  <input type="text" class="name_input_3">
  <br>
  <input type="text" class="name_input_4">
  <br>
  <input type="text" class="name_input_5">
  <br>
  <input type="text" class="name_input_6">
  <br>
  <input type="text" class="name_input_7">
  <br>
  <input type="text" class="name_input_8">
  <br>
  <input type="text" class="name_input_9">
  <br>
  <input type="text" class="name_input_10">
  <br>
  <input type="text" class="name_input_11">
  <br>
  <input type="text" class="name_input_12">
  <br>
</div>

<div class="inning no-print">
  <h1>1st Inning</h1>
  <select class="positions_1" onchange="document.positions_1_1.showValue_1_1.value=this.value">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_2" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_3" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_4" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_5" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_6" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_7" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_8" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_9" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_10" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_11" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_12" class="positions_1">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
</div>

<div class="inning no-print">
  <h1>2nd Inning</h1>
  <select id="2_1" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_2" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_3" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_4" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_5" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_6" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_7" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_8" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_9" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_10" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_11" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>

  <select id="2_12" class="positions_2">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
</div>

<div class="inning no-print">
  <h1>3rd Inning</h1>
  <select id="1_1" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_2" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_3" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_4" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_5" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_6" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_7" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_8" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_9" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_10" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_11" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
  <select id="1_12" class="positions_3">
    <option disabled selected value>Position</option>
    <option value="P">P</option>
    <option value="C">C</option>
    <option value="1B">1B</option>
    <option value="2B">2B</option>
    <option value="3B">3B</option>
    <option value="SS">SS</option>
    <option value="LF">LF</option>
    <option value="CF">CF</option>
    <option value="RF">RF</option>
    <option value="LCF">LCF</option>
    <option value="RCF">RCF</option>
    <option value="DH">DH</option>
    <option value="EH">EH</option>
  </select>
  <br>
</div>

    正如你所看到的(对于那些喜欢棒球的人来说),这是为三局的球员准备的。到目前为止,我在前三局中使用了“positions\u 1”、“positions\u 2”和“positions\u 3”类。我需要再打六局,才能在常规赛中打满九局。这将大大增加代码文本的数量,而且似乎有一种更经济和/或优雅的方法可以做到这一点。

    有什么方法可以改进这些代码吗?无论是Javascript、HTML还是两者兼有,如果有人能在这方面传授他们的智慧,那就太棒了。

    2 回复  |  直到 7 年前
        1
  •  1
  •   C3roe    7 年前

    第一步,创建一个更灵活的函数,可以用于多个实例-不要通过“编号”的类名选择元素。您需要一个可以处理 全部的 选择字段,让我们从 $('select').on('change', function() { ... } (.on是附加事件处理程序的首选方式。)

    将每11个选择字段分组,这些字段一起属于容器元素。这将使我们的处理函数内部更容易,只对当前处理函数的兄弟进行操作,而不是对所有处理函数进行操作。

    使命感 .show() 躲藏

    所以这可以归结为 

    $(function() {
  $('select').on('change', function() {
    $(
       // select all option elements with the value this of select's selected option
       'option[value="'+$(this).val()+'"]',
       // limited to the context of all select fields within the current select's
       // parent container, minus the current select field itself
       $(this).parents('.container').find('select').not($(this))
    // ... and set disabled=true for all those
    ).prop('disabled', true); // why prop instead attr, see
                              // https://stackoverflow.com/q/5874652/1427878
  });
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <h1>1st Inning</h2>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

<div class="container">
  <h1>1st Inning</h2>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

<div class="container">
  <h1>1st Inning</h2>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <select>
    <option disabled selected>Position</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

    (我已将其从您要求的11倍缩短为11倍……例如,这里有一点。)

        2
  •  0
  •   Imme    7 年前

    (有点仓促的回答)

    Javascript 

    $(document).ready(function() {
   for (var i = 1 ; i < inningsYouWant; i++){
      $(".positions_" + i).change(function() {
          // Get the selected value
          var selected = $("option:selected", $(this)).val();
          // Get the ID of this element
          var thisID = $(this).attr("id");
          // Reset so all values are showing:
          $(".positions_"+ i + " option").each(function() {
              $(this).show();
          });
          $(".positions_" + i).each(function() {
              if ($(this).attr("id") != thisID) {
                  $("option[value='" + selected + "']", $(this)).attr("disabled", true);
              }
          });

      });
  }
 });

    Html 

    <div id="selectfields"></div>

    更多JS 

    var html = ""
var positions = ["P","C", "etc"];
var options = "<option disabled selected value>Position</option>";
for (var i = 0; i < positions.length; i++){
  options += '<option value="'  + positions[i] +  '"> ' + positions[i] + '</option>'
}
// Define the innnings and positions
for (var i = 0 ; i < innings; i++){
  html += '<div id="inning' + i + '">';
  html += i + " inning";
  for (var j = 0; j < numberOfPositions){
    html += '<select id="' + i + '_' + j + '" class="positions_' + i + '">'
    html += options;
    html += '</select>'
  }
  html += '</div>'
}
document.getElementById("selectfields").innerHTML = html;

    有了它,您可以自动生成所有字段所需的html,因为它们遵循一种模式。

    推荐文章
    Geeta  ·  选定选项上未显示图像
    6 年前
    sjkp  ·  Selenium-如果值位于html中的<table>标记内而不是<option>下,则从下拉列表中选择项目
    6 年前
    Luke  ·  Bootstrap 4选择样式
    6 年前
    kamran shah  ·  使用jQuery使用下拉选择值更新类
    7 年前
    AllramEst  ·  在选择列表中,哪种方式是选择默认选定项的最佳方式?(下拉列表)
    7 年前
    Terry  ·  检索已使用JavaScript重新排序的选择元素选项列表
    7 年前
    Jóni Silva  ·  下拉列表(选择/选项)不适用于Firefox mobile(带触摸)
    7 年前
    Brett Roby  ·  在另一个选择实例中选择时禁用选择选项值
    7 年前
    Patricia  ·  javascript jquery下拉列表框-如何在特定索引处设置选项文本(未选中!)
    7 年前
    R1ddler  ·  提交后如何显示所选选项值
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号