在另一个 Select 实例中 Selected 时禁用 Select 选项值
Disable Select Option Value when Selected in Another Select Instance
关于我之前提出的一个非常相似的问题：
disable select option value when selected
如何扩展 Michel 的解决方案？具体来说，我希望获得完全相同的功能，但有 11 个不同的选项和 selection 组的 11 个实例。此外，如果有意义的话，我想拥有多个实例的多个实例。基本上，一列 select 离子组向下（视觉上）全部捆绑在一起，这样你就不能 select 该垂直组中的两个相同选项，然后移动到另一列以右边是一组新的 select 离子，它们不会干扰 existing/previous 列的 select 离子；并以网格模式不断进行，直到总共大约七八列左右。
我可以在 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>
如您所见（对于那些喜欢棒球的人），这是为三局的球员准备的。到目前为止，我在前三局使用 类 "positions_1"、"positions_2" 和 "positions_3"。我需要再这样做六局才能获得常规比赛的完整九局。这将大大增加代码文本的数量，似乎有更经济的 and/or 优雅的方式来做到这一点。
有没有办法改进这些代码？无论是 Javascript、HTML 还是两者，如果有人能在这方面传授他们的智慧，那就太棒了。
（有点仓促回答）
我还没有检查你的代码是否存在会导致它无法在 JSFiddle 中运行的缺陷，但是如果你找不到更好的方法，你总是可以使用 Javascript 来自动生成它，因为它们遵循明确的模式你只需要迭代局和位置来生成每个 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>
更多 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，因为它们遵循一种模式。
创建适用于多个实例的更灵活函数的第 1 步 - 远离通过 "numbered" class 名称 selecting 元素。您想要一个适用于 all select 字段的更改处理程序，所以让我们从 $('select').on('change', function() { ... } 开始（.on 是附加事件处理程序的首选方式。）
将属于同一容器元素的每 11 个 select 字段分组。这将使我们的处理程序函数内部更容易，只对当前的兄弟姐妹进行操作，而不是所有兄弟姐妹。
为所有选项调用 .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
//
});
})
<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 中缩短了……为了示例目的，这里稍微缩短了一点。）
关于我之前提出的一个非常相似的问题：
disable select option value when selected
如何扩展 Michel 的解决方案？具体来说，我希望获得完全相同的功能，但有 11 个不同的选项和 selection 组的 11 个实例。此外，如果有意义的话，我想拥有多个实例的多个实例。基本上，一列 select 离子组向下（视觉上）全部捆绑在一起，这样你就不能 select 该垂直组中的两个相同选项，然后移动到另一列以右边是一组新的 select 离子，它们不会干扰 existing/previous 列的 select 离子；并以网格模式不断进行，直到总共大约七八列左右。
我可以在 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>
如您所见（对于那些喜欢棒球的人），这是为三局的球员准备的。到目前为止，我在前三局使用 类 "positions_1"、"positions_2" 和 "positions_3"。我需要再这样做六局才能获得常规比赛的完整九局。这将大大增加代码文本的数量，似乎有更经济的 and/or 优雅的方式来做到这一点。
有没有办法改进这些代码？无论是 Javascript、HTML 还是两者，如果有人能在这方面传授他们的智慧，那就太棒了。
（有点仓促回答）
我还没有检查你的代码是否存在会导致它无法在 JSFiddle 中运行的缺陷，但是如果你找不到更好的方法，你总是可以使用 Javascript 来自动生成它，因为它们遵循明确的模式你只需要迭代局和位置来生成每个 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>
更多 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，因为它们遵循一种模式。
创建适用于多个实例的更灵活函数的第 1 步 - 远离通过 "numbered" class 名称 selecting 元素。您想要一个适用于 all select 字段的更改处理程序，所以让我们从 $('select').on('change', function() { ... } 开始（.on 是附加事件处理程序的首选方式。）
将属于同一容器元素的每 11 个 select 字段分组。这将使我们的处理程序函数内部更容易，只对当前的兄弟姐妹进行操作，而不是所有兄弟姐妹。
为所有选项调用 .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
//
});
})
<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 中缩短了……为了示例目的，这里稍微缩短了一点。）