下拉列表创建订单，不能在每个下拉列表中选择相同的数字

您可能希望使用selectize.js库来实现下拉列表，它位于此处：https://brianreavis.github.io/selectize.js/

这是一个解决方案，它将选项替换为仅在其他元素中选择的选项

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);            
    });    
});

还需要有一个选项，每个选项中都没有值

演示

我正在使用与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);
                        }
                    }
                }
            }
        }
    }
}

在其中一个下拉列表中选择一个选项时，它将遍历其他两个选项并禁用与选择匹配的值。 通过禁用它们，而不是删除它们，如果进行了新的选择，您可以轻松地"恢复"视蛋白。

理想情况下，您将能够隐藏这些选项，而不是禁用它们，但是在将display: none;应用于<option>标签（瞪眼IE）时存在浏览器支持问题。

感谢您的回答，

但这些都不是我想要的。

这是我是如何做到的：

首先，我已经有一个用于其他目的的隐藏字段（我忘了在这里提及）。

$('.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"，我进行以下检查：

1. 创建 checkcurrent 变量以便以后在需要时对其进行修改
2. 是否禁用，如果只是跳过它
3. $currentselect值是否具有相同的值具有"select_order"
4. 如果具有相同的值，请使用$currentorder值更改当前"select_order"，然后允许更改$currentselect
5. 使用新值更改 Checkcurrent，以便_current具有每个值的正确编号