大家好日子，
目前正在处理一个应用程序，在设置中我有一个下拉列表列表，我的客户可以选择。这些下拉列表是创建一个他们希望这些选项出现的订单。
如何制作，他们不能选择相同数字的2倍，如果他们这样做，“新”选择将替换旧选择的“相同数字”。
<select name="temporary-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="temporary-2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="temporary-3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
我目前正在我的应用程序中使用jQuery，所以我想的是比较每次Drop Down on change，如果已经存在相同的数字，我只会切换这两个数字。
这是一种正确的方法吗？或者有没有办法做到这一点？
答案 0 :(得分：0)
您可能希望使用selectize.js库来实现您的下拉菜单，它位于此处：https://brianreavis.github.io/selectize.js/
答案 1 :(得分：0)
这是一个解决方案，只替换那些尚未在其他元素中选择的选项
var $selects = $('select.temp'),// added a common class to the elements
opts = $selects.first().html()
$selects.change(function(){
$selects.each(function(){
var otherValues = $selects.not(this).map(function(){
return this.value ? this.value : null;
}).get();
var currVal = this.value;
$(this).html(function(){
return $(opts).filter(function(){
return $.inArray(this.value, otherValues) === -1;
});
}).val(currVal);
});
});
还需要在每个
中都有一个没有值的选项的 DEMO
答案 2 :(得分：0)
我对charlietfl的解决方案使用了类似的想法，但我走了一条不同的路线。 。 。我的代码禁用已在其他下拉菜单中选择的所有选项。和他一样，我也要求你有一个没有价值的选项（如果需要，有办法避免这种情况，但是，如果你可以添加这样的默认值，它会使代码更加简单）。
<强> HTML
<select name="temporary-1">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="temporary-2">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="temporary-3">
<option value="">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<强> JS / jQuery的
$("document").ready(function() {
$("select").on("change", disableOptions);
});
function disableOptions() {
var $allSelectInputs = $("select");
var sChangedSelectName = $(this).attr("name");
var $changedSelectOptions = $(this).find("option");
var sChangedSelectVal = $changedSelectOptions.filter(":selected").val();
for (i = 0; i < $changedSelectOptions.length; i++) {
if (!($($changedSelectOptions[i]).prop("disabled"))) {
for (j = 0; j < $allSelectInputs.length; j++) {
if ($($allSelectInputs[j]).attr("name") !== sChangedSelectName) {
var $currentSelectOption = $($($allSelectInputs[j]).find("option")[i]);
if (sChangedSelectVal !== "") {
if ($currentSelectOption.val() === sChangedSelectVal) {
$currentSelectOption.prop("disabled", true);
}
else {
$currentSelectOption.prop("disabled", false);
}
}
}
}
}
}
}
如果在其中一个下拉列表中选择了一个选项，它将通过另外两个选项并禁用与所选内容匹配的值。通过禁用它们，而不是删除它们，您可以轻松地恢复＆＃34;如果进行了新的选择，那么就可以了。
理想情况下，您可以隐藏选项，而不是禁用它们，但在将display: none;应用于<option>标签时会出现浏览器支持问题（在IE浏览器中眩光）。
答案 3 :(得分：0)
感谢您的回答，
但那些不是我想要的。
我是这样做的：
首先，我已经有一个用于其他目的的隐藏字段（我在这里忘了提及）。
$('.select_class').change(function () {
var $currentselect = $(this);
var $currentorder = $('input[name=' + $(this).attr('name') + '_current' + ']');
$("select[name^='select_order_']").each(function () {
var $checkcurrent = $('input[name=' + $(this).attr('name') + '_current' + ']');
if (!$(this).is(':disabled')) {
if($(this).prop('name') != $currentselect.prop('name')){
if($(this).val() == $currentselect.val()){
$(this).val($currentorder.val())
$checkcurrent.val($currentorder.val())
}
}
}
});
$currentorder.val($(this).val())
});
$ currentselect获取已修改的字段并将其保留为变量以在以下部分中使用
$ currentorder取名.class_select并添加_current（它成为当前数据的隐藏字段。
对于所有“select_order”，我会进行以下检查：