Disable Select Option Value when Selected in Another Select Instance

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.

Note that in your js the only thing that changes is the number at the end, you could easily auto generate it on a loop. Same for your HTML, save the options in a variable and loop over the numbers changing the ID's and classes. (There's probably a better way to do this, but even if you dont find that method, this can reduce the amount of code in both sides) — Imme, Oct 19 '17 at 19:48
@Imme, could you please elaborate on that? I'm not a really good js coder, as you might have guessed by now... — Brett Roby, Oct 19 '17 at 19:49
Posted a way to autogenerate the code below, should help a bit — Imme, Oct 19 '17 at 20:07

score 1 · Accepted Answer · answered Oct 19 '17 at 21:47

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.)

I think I am following what you are doing here, and it's MUCH nicer and cleaner than the repeated code that I have going on. I'm going to try and use what you've done here. — Brett Roby, Oct 20 '17 at 05:06
This works very nicely, and you slimmed my code by quite a lot. It's exactly what I needed. Exactly. Thank you. — Brett Roby, Oct 24 '17 at 04:47

Imme · Answer 2 · 2017-10-19T21:00:41.573

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

Thank you for all of this support. I created a Fiddle here: https://jsfiddle.net/zt0dn7h0/. The function doesn't seem to be working quite right in the Fiddle. I'm still also not totally certain what you're suggesting that I do. Again, thanks for your patience with this novice (at best) coder. — Brett Roby, Oct 19 '17 at 20:34
https://jsfiddle.net/zt0dn7h0/6/ here's a fiddle with it working. i left several variables intentionally unset in my answer so you could set them, i just set them all and added some missing } and it worked. — Imme, Oct 19 '17 at 21:02
I'm having a little trouble understanding what is going on. In the Fiddle, there is no HTML. Could you put a little in there so I could see how it's supposed to be laid out so that it all works? Thank you. — Brett Roby, Oct 20 '17 at 05:07
@BrettRoby the point of this method is not to have to write the html manually, but to generate it automatically through javascript. — Imme, Oct 20 '17 at 13:10
@lmme Thanks. I'm super-confused, though. When I run the Fiddle, I don't see anything. I even had it run in the "show" version: https://jsfiddle.net/zt0dn7h0/6/show/. Still nothing. I also took all the code and saved it into an HTML file, then ran it locally in an internet browser. Nothing there, either. I am certainly misunderstanding what you're wanting me to do. I'm incredibly intrigued by what you've created here and would love to see it work. Is there any way you could link me to a completed file? — Brett Roby, Oct 20 '17 at 18:27

Disable Select Option Value when Selected in Another Select Instance

2 Answers2

Javascript

Html

More JS