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

Question

大家好，

目前正在开发一个应用程序，在设置中我有一个下拉列表列表，我的客户可以选择。这些下拉列表用于创建他们希望这些选项出现的顺序。

你怎么能做到，他们不能选择 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 的变化，如果已经存在相同的数字，我只需切换两个数字。

这会是正确的方法吗？还是已经有办法做到这一点？

Answer 1

您可能想使用 selectize.js 库来实现您的下拉菜单，它位于：https://brianreavis.github.io/selectize.js/

Answer 2

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

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

Answer 3

我正在使用与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）。

Answer 4

感谢您的回答，

但那些不是我想要的。

我是这样做的：

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

$('.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. 如果它具有相同的值，请将当前的“select_order”更改为 $currentorder 值，然后允许更改为 $currentselect
5. 将 checkcurrent 更改为新值，以便 _current 对每个都有正确的数字