小贝子编程

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



关于摆在我面前的一个非常相似的问题：

选择时禁用选择选项值

如何扩展米歇尔的解决方案？具体来说，我希望得到同样的函数，但有11个不同的选项和11个选择组实例。此外，如果有意义的话，我希望拥有多个实例中的多个实例。基本上，一列向下的选择组(视觉上)都连接在一起，这样你就无法在垂直组中选择两个相同的选项，然后移动到右侧的另一列，用一组不干扰现有/前一列选择的新选项；并且以网格模式一直持续到总共大约七或八列。

我可以在Excel中做我想做的事情，但我有一个有用的应用程序，可以用于我正在做的基于浏览器的事情，所以我很感激能提供的任何帮助。

我仍在努力，我得到了一些非常有效的东西，因为我需要它来工作。我现在遇到的问题是有很多代码，所以我觉得我做得不对。如果我们想在这里和那里更改一些小事情，那么这么多代码并不是真正可持续的，也不容易编辑。

这是在浏览器中工作的，但似乎不想在JSFiddle或Plunker中正确运行，所以下面是我的代码。。。

Javascript：

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

HTML:

<div class="inning no-print">
<h1>Player Name</h1>
<input type="text" class="name_input_1">
<br>
<input type="text" class="name_input_2">
<br>
<input type="text" class="name_input_3">
<br>
<input type="text" class="name_input_4">
<br>
<input type="text" class="name_input_5">
<br>
<input type="text" class="name_input_6">
<br>
<input type="text" class="name_input_7">
<br>
<input type="text" class="name_input_8">
<br>
<input type="text" class="name_input_9">
<br>
<input type="text" class="name_input_10">
<br>
<input type="text" class="name_input_11">
<br>
<input type="text" class="name_input_12">
<br>
</div>
<div class="inning no-print">
<h1>1st Inning</h1>
<select class="positions_1" onchange="document.positions_1_1.showValue_1_1.value=this.value">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_2" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_3" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_4" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_5" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_6" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_7" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_8" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_9" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_10" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_11" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_12" class="positions_1">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
</div>
<div class="inning no-print">
<h1>2nd Inning</h1>
<select id="2_1" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_2" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_3" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_4" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_5" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_6" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_7" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_8" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_9" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_10" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_11" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="2_12" class="positions_2">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
</div>
<div class="inning no-print">
<h1>3rd Inning</h1>
<select id="1_1" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_2" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_3" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_4" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_5" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_6" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_7" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_8" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_9" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_10" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_11" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
<select id="1_12" class="positions_3">
<option disabled selected value>Position</option>
<option value="P">P</option>
<option value="C">C</option>
<option value="1B">1B</option>
<option value="2B">2B</option>
<option value="3B">3B</option>
<option value="SS">SS</option>
<option value="LF">LF</option>
<option value="CF">CF</option>
<option value="RF">RF</option>
<option value="LCF">LCF</option>
<option value="RCF">RCF</option>
<option value="DH">DH</option>
<option value="EH">EH</option>
</select>
<br>
</div>

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

有什么方法可以改进这些代码吗？无论是Javascript、HTML，还是两者兼而有之，如果有人能在这方面传授他们的智慧，那将是非常棒的。

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

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

对所有选项调用.show()似乎没有必要——谁首先隐藏了这些选项？(在你的例子中没有看到任何隐藏。)

所以这将归结为

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

(我把它从你要求的11缩短到了11……这里有一点，例如。)

(有点仓促的回答)

我还没有检查过你的代码是否存在会使其在JSFiddle中不起作用的缺陷，但如果你找不到更好的方法，你可以总是使用Javascript自动生成它，因为它们遵循一个清晰的模式，你只需要迭代局数和位置来生成每个选择。

Javascript

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

Html

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

更多JS

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

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium