Javascript 下拉框中的下拉选项
我使用24个下拉列表。我想为一个职位选择一个司机。但是当我为第一个位置选择一个驱动程序时，它应该从其他下拉列表中删除，这样我就不能使用一个驱动程序两次。下拉列表为：Javascript 下拉框中的下拉选项,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,我使用24个下拉列表。我想为一个职位选择一个司机。但是当我为第一个位置选择一个驱动程序时，它应该从其他下拉列表中删除，这样我就不能使用一个驱动程序两次。下拉列表为： <select name="rijderQual1"> <option value="1">S. Vettel</option> <option value="2">M. Webber</option> <option value="3">J. Button&l
<select name="rijderQual1">
<option value="1">S. Vettel</option>
<option value="2">M. Webber</option>
<option value="3">J. Button</option>
<option value="4">L. Hamilton</option>
<option value="5">F. Alonso</option>
<option value="6">F. Massa</option>
<option value="7">M. Schumacher</option>
<option value="8">N. Rosberg</option>
<option value="9">K. Raikkonen</option>
<option value="10">R. Grosjean</option>
<option value="11">R. 11</option>
<option value="12">R. 12</option>
<option value="14">K. Kobayashi</option>
<option value="15">S. Perez</option>
<option value="16">R. 16</option>
<option value="17">R. 17</option>
<option value="18">P. Maldonado</option>
<option value="19">R. 19</option>
<option value="20">H. Kovalainen</option>
<option value="21">J. Trulli</option>
<option value="22">P. de</option>
<option value="23">R. 23</option>
<option value="24">T. Glock</option>
<option value="25">C. Pic</option>
</select>
维特尔
韦伯先生
J.按钮
汉密尔顿
阿隆索
马萨
舒马赫
罗斯伯格
雷克南
格罗斯金
R.11
R.12
K.小林
佩雷斯
R.16
R.17
马尔多纳多
R.19
科瓦莱宁
特鲁利
普德
R.23
格洛克
C.事先知情同意
rijderQual1S VettelrijderQual1有办法做到这一点吗？我认为应该用JS或jQuery来完成这项工作。尝试通过数组填充下拉框，并在每个选中的项目上从该数组中删除该项目。JS和JQuery都可以工作。尝试通过数组填充下拉框，并在每个选中的项目上从该数组中删除该项目。JS和JQuery都可以工作。每次更改某个选定值时，您都可以迭代所有选项，并隐藏在其他地方选择的选项：
$('select').change(function() {
var selectedValues = $('select').map(function() { return this.value; }).get();
$('option').show();
$.each($('option'), function(i, item) {
if($(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 )
{
$(this).hide();
}
});
});
每次更改某个选定值时，您都可以迭代所有选项，并隐藏在其他位置选择的选项：
$('select').change(function() {
var selectedValues = $('select').map(function() { return this.value; }).get();
$('option').show();
$.each($('option'), function(i, item) {
if($(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 )
{
$(this).hide();
}
});
});
工作演示 另一个 非常简洁的版本。这是来源：（写得很好） 希望它适合事业<代码>B- 代码
$('document').ready(function() {
$(".hulk").change(function() {
var val = this.options[this.selectedIndex].value;
$('select').not(this).children('option').filter(function() {
return this.value === val;
}).remove();
});
});
工作演示 另一个 非常简洁的版本。这是来源：（写得很好） 希望它适合事业<代码>B- 代码
$('document').ready(function() {
$(".hulk").change(function() {
var val = this.options[this.selectedIndex].value;
$('select').not(this).children('option').filter(function() {
return this.value === val;
}).remove();
});
});
我仍然相信另一种方法会更明智，例如对所有选择了相同值的下拉列表进行颜色编码。或者，如果在另一个下拉列表中选择该选项，则从第一个下拉列表中取消选择该选项。这样你就不会剥夺用户做他们想做的事情，而是在他们试图做不允许的事情时警告他们。更好的用户体验。像这样的
// Store text labels for options
$("option")
.each(function() {
$(this).data("label", $(this).text());
});
$('select').change(function() {
// Get selected values
var selectedValues = $('select').map(function() { return this.value; }).get();
// Reset conflicting dropdowns
currentVal = $(this).val();
$(this).siblings("select")
.each(function() {
if ($(this).val() == currentVal) $(this).val(0);
});
// Mark selected options as unavailable
$("option")
.each(function() {
if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
$(this).text("(" + $(this).data("label") + ")");
else
$(this).text($(this).data("label"));
});
});
$('select').change(function() {
var selectedValues = []
$("option:selected").each(function() { selectedValues.push($(this).val()) });
$("option")
.removeAttr("disabled")
.each(function() {
if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
{
$(this).attr("disabled", "true");
}
});
});
演示：我仍然相信另一种方法会更明智，例如对所有选择了相同值的下拉列表进行颜色编码。或者，如果在另一个下拉列表中选择该选项，则从第一个下拉列表中取消选择该选项。这样你就不会剥夺用户做他们想做的事情，而是在他们试图做不允许的事情时警告他们。更好的用户体验。像这样的
// Store text labels for options
$("option")
.each(function() {
$(this).data("label", $(this).text());
});
$('select').change(function() {
// Get selected values
var selectedValues = $('select').map(function() { return this.value; }).get();
// Reset conflicting dropdowns
currentVal = $(this).val();
$(this).siblings("select")
.each(function() {
if ($(this).val() == currentVal) $(this).val(0);
});
// Mark selected options as unavailable
$("option")
.each(function() {
if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
$(this).text("(" + $(this).data("label") + ")");
else
$(this).text($(this).data("label"));
});
});
$('select').change(function() {
var selectedValues = []
$("option:selected").each(function() { selectedValues.push($(this).val()) });
$("option")
.removeAttr("disabled")
.each(function() {
if( $(this).val() != 0 && $.inArray($(this).val(), selectedValues) > -1 && !$(this).is(":selected"))
{
$(this).attr("disabled", "true");
}
});
});
演示：UX方面这听起来是个坏主意。例如，如果要在两个Dropbox之间切换位置，首先必须找到当前使用要切换到的值的Dropbox，并取消其填充，然后才能为其指定正确的值。想象一下，然后切换两个以上的位置。也许相同值的彩色突出显示下拉列表会更好？嗯，我同意你没有想到。我添加了一个类似的建议，你可以看看。此外，您接受的答案在Chrome.UX-wise中不起作用。这听起来是个坏主意。例如，如果要在两个Dropbox之间切换位置，首先必须找到当前使用要切换到的值的Dropbox，并取消其填充，然后才能为其指定正确的值。想象一下，然后切换两个以上的位置。也许相同值的彩色突出显示下拉列表会更好？嗯，我同意你没有想到。我添加了一个类似的建议，你可以看看。此外，您接受的答案在Chrome中不起作用。此解决方案不会显示未选中的项目，因为它会永久删除它们。与我的相比，我的隐藏/取消隐藏了它们@Rick@MichalKlouda
：）j。按钮：）j。按钮