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

时间：2017-10-17 00:32:28

标签： javascript html html-select

参考我面前提出的一个非常相似的问题：

disable select option value when selected

如何扩展Michel的解决方案？具体来说，我希望获得相同的功能，但有11个不同的选项和11个选择组的实例。此外，我想有多个实例的多个实例，如果这是有道理的。基本上，一组选择组向下（视觉上）全部绑定在一起，这样您就无法在该垂直组中选择两个相同的选项，然后使用一组新的选择移动到右侧的另一列不要干扰现有/上一列的选择;然后以网格模式打开，直到大约七或八列左右。

我可以做我在Excel中需要做的事情，但是我有一个有用的应用程序，我正在做的事情，基于浏览器会更好，所以任何可以提供的帮助都会受到赞赏。

我还在为此工作，我得到了一些非常有效的东西，因为我需要它才能工作。我现在遇到的问题是有很多代码，所以我觉得我做得不对。如果我们想要在这里和那里改变一些小东西，那么这么多代码就不是可持续的并且很容易编辑。

这在浏览器中工作，但似乎不想在JSFiddle或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>

正如你所看到的（对于那些参加棒球比赛的人来说），这是三局比赛。值得玩家。我使用的是＆＃34; position_1＆＃34;，＆＃34; positions_2＆＃34;和＆＃34; positions_3＆＃34;到目前为止前三局。我需要为另外六局比赛做这个以获得规则比赛的全部九局。这将大大增加代码文本的数量，似乎有更经济和/或更优雅的方式来做到这一点。

有没有办法改进这些代码？无论是Javascript，HTML还是两者，如果有人愿意传授他们的智慧，这将是非常棒的。

2 个答案:

答案 0 :(得分：1)

第1步创建一个更灵活的功能，适用于多个实例 - 远离通过“编号”类名选择元素。您需要一个适用于所有选择字段的更改处理程序，所以让我们从$('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 ...这里有一点，例如目的。）

答案 1 :(得分：0)

（有点急于回答）

我没有检查你的代码是否会使它在JSFiddle中无效，但如果你找不到更好的方法，你总是可以使用Javascript自动生成它，因为它们遵循一个明确的模式你只需要迭代用于生成每个选择的局和位置。

的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，因为它们遵循模式。

相关问题
最新问题