此页面将有 16 个下拉框，当我从每个下拉框中选择一个项目时，我希望将其从所有其他项目中删除。
这是针对足球阵容页面的，如果这有助于您描绘场景。
我希望这不会太模糊，并且我很清楚我正在努力解决的问题。
谢谢:)
我在整个项目中使用：HTML，PHP，Javascript，AJAX
<select name="pl1">
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select name="pl2">
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select name="pl3">
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select name="pl4">
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
使用 jQuery：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function () {
var selects = $('select.magic-select');
$(selects).bind('change', function (evt) {
var newVal = $(this).val(), oldVal = $(this).data('old-val');
if (newVal != 0) {
$(selects).not(this).find('option[value="' + newVal + '"]').attr('disabled', 'disabled');
}
$(selects).not(this).find('option[value="' + oldVal + '"]').removeAttr('disabled');
$(this).data('old-val', newVal);
});
});
</script>
</head>
<body>
<?php
$players = array('Ben', 'Jack', 'James', 'John', 'Foo', 'Bar', 'Allmighty Foobar');
$numPlayers = count($players);
for ($i = 1; $i <= $numPlayers; $i += 1) {
printf('<select class="magic-select" name="pl%s" size="%s"><option value="0"></option>', $i, $numPlayers + 1);
foreach ($players as $j => $name) {
printf('<option value="%s">%s</option>', $j + 1, $name);
}
echo '</select>';
}
?>
</body>
</html>
请注意，magic-select作为类名不是必须的。它可以是任何东西，但你必须相应地调整javascript。
Javascript 解决方案：
function check() {
d=document;
myArray = [];
for (h=0;h<4;h++) {
myArray[h] = d.getElementById('pl'+(h+1)).value;
}
for (a=0;a<4;a++) {
for (b=1;b<5;b++) {
d.getElementById('pl'+(a+1)).options[b].style.display = "block";
for (c=0;c<4;c++) {
if(d.getElementById('pl'+(a+1)).options[b].value == myArray[c]) {
d.getElementById('pl'+(a+1)).options[b].style.display = "none";
}
}
}
}
}
.HTML：
<select id="pl1" onchange="check();">
<option value="">Choose</option>
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select id="pl2" onchange="check();">
<option value="">Choose</option>
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select id="pl3" onchange="check();">
<option value="">Choose</option>
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
<select id="pl4" onchange="check();">
<option value="">Choose</option>
<option value="1">Ben</option>
<option value="2">Jack</option>
<option value="3">James</option>
<option value="4">John</option>
</select>
确保在选择中使用 id 而不是名称
原型解决方案：
$$('select').each(function(item) {
Event.observe(item, 'change', function(e) {
var el = e.srcElement;
var val = el.options[el.selectedIndex].innerHTML;
$$('select').each(function(item) {
if (item != el) {
for (var i = 0; i < item.options.length; i++) {
if (item.options[i].innerHTML == val) {
item.removeChild(item.options[i]);
}
}
}
});
});
});
http://jsfiddle.net/qrhe7/
我已经接受了@Tokes答案，并使其更容易理解，并添加了一些jQuery用于下拉列表和选项选择。我提供这个以防有人努力实现它。我正在使用最直接的选择器，所以jQuery不必那么努力。我在 68 个下拉菜单中使用了这个逻辑，其中包含 68 个选项，由于 jQuery 和我使用的 for 循环数量，当我开始时性能有点糟糕，但现在它真的很活泼，所以我希望有人从中得到一些用处。谢谢托克斯，你的回答对我的情况有帮助:)
function _updateDropdowns() {
// gather selects with class so we dont grab all
var select = $('#tbl_fieldMap select.table-fields');
// store used fields
var used = [];
// collect all selected values
for (var x = 0; x < select.length; x++) {
// get selects value
var val = select[x].value;
// dont add empty
if (val != '')
used[x] = val;
}
// foreach select box
for (var a = 0; a < select.length; a++) {
// get options that matter (excludes 'default entry')
var options = $(select[a]).children('.table-option');
// foreach option in select
for (var c = 0; c < options.length; c++) {
// current option
var opt = options[c];
if ($.inArray(opt.value, used) > -1) {
// hide if already used
opt.style.display = "none";
} else {
// show if not used
opt.style.display = "block";
}
}
}
}
.data（） = 存储与指定元素关联的任意数据和/或返回设置的值。
.not（） = 从匹配的元素集中删除元素。
.on（） = 将一个或多个事件的事件处理程序函数附加到所选元素（在本例中为更改）
.find（） = 获取当前匹配元素集中每个元素的后代，按选择器、jQuery 对象或元素过滤。 在这种情况下，找到已使用的元素并将其放入名为 prevValue 的 var 中，然后我们检查是否与其他选择字段匹配，然后从选择选项中删除这些字段。
$(document).ready(function(){
$('select').on('change', function(event ) {
var prevValue = $(this).data('previous');
$('select').not(this).find('option[value="'+prevValue+'"]').show();
var value = $(this).val();
$(this).data('previous',value);
$('select').not(this).find('option[value="'+value+'"]').hide();
});
});