stackoom
  简体   繁体   中英

Disable Select Option Value when Selected in Another Select Instance

 原文  2017-10-17 00:32:28  0   2    javascript/ html/ html-select

Question

In reference to a very similar question asked before me:

disable select option value when selected

How would one expand on Michel's solution? Specifically, I'm looking to get that same exact function, but with 11 different options and 11 instances of the selection groups. Further, I would like to have multiple instances of the multiple instances, if that makes sense. Basically, a column of selection groups going down (visually) that are all tied together such that you couldn't select two of the same options within that vertical group, then move on to another column to the right with a new set of selections that don't interfere with the existing/previous column's selections; and on and on in a grid pattern until about seven or eight columns or so total.

I can do what I neeed to do in Excel, but I have a useful application of this for something I'm doing where browser-based would be better, so any help that can be offered is appreciated.

I am still working on this, and I got something that pretty much works as I need it to work. The issue I am having now is there is TONS of code, so I have a feeling that I'm not doing it right. This much code isn't really sustainable and easily editable if we want to change little things here and there.

This is working in a browser, but doesn't seem to want to run correctly in JSFiddle or Plunker, so here are my code bits...

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>

As you can see (for those who are into baseball), this is for three innings' worth of players. I'm using the classes "positions_1", "positions_2", and "positions_3" for first three innings so far. I need to do this for six more innings to get the full nine innings of a regulation game. That will increase the volume of code text by a lot, and it seems like there's a more economic and/or elegant way to do this.

Is there a way to improve upon any of this code? Whether that's the Javascript, HTML, or both, that would be awesome if someone would impart their wisdom on this.

2 answers

solution1
 1 ACCPTED  2017-10-19 21:47:41

Step 1 in creating a more flexible function that will work for multiple instances - stay away from selecting elements via "numbered" class names. You want a change handler that works on all select fields, so let's start with $('select').on('change', function() { ... } (.on is the preferred way to attach event handlers.)

Group each 11 select fields that belong together in a container element. That will make it easier inside our handler function, to only operate on the siblings of the current one, and not all of them.

Calling .show() for all options seems unnecessary - who's hiding them in the first place? (Didn't see any hiding happening in your example.)

So that would boil down to 

 $(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>

(I've shortened it down from your requested 11 times 11 ... here a bit, for example purposes.)

solution2
 0  2017-10-19 20:06:07

(Kinda rushed answer)

I haven't checked your code for flaws that would make it not work in JSFiddle, but if you dont find a better method you could always use Javascript to autogenerate it all, since they follow a clear pattern you just gotta iterate over the innings and positions to generate each select.

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>

More 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;

With this you could autogenerate the html needed for all the fields since they follow a pattern.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question disable select option value when selected How to disable value in select option when it already selected by another select option Disable <select> option when selected in another <select> box Disable option values in one select dropdown depending on value selected in another how to disable an option already selected in another <select>? Disable selected option from one select box when selected in another select box Disable select option in group of select dropdowns when option is selected Disable select option when it already selected How to disable another select option when i get value of cash from a select option Disable select option if previously selected
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM