下拉列表创建订单，每个下拉列表不能select相同的数字

Question

大家好，

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

你怎么能做到，他们不能 select 2 次相同的数字，如果他们这样做 "new" selection 将取代 "same number"与旧 selection.

<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，所以我想的是比较每个下拉列表的变化，如果已经存在相同的数字，我会切换两个数字。

这样合适吗？或者已经有办法做到这一点？

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

当在其中一个下拉菜单中选择一个选项时，它将通过其他两个并禁用与选择相匹配的值。通过禁用它们，而不是删除它们，如果进行了新的选择，您可以轻松地 "reinstate" optoins。

理想情况下，您可以隐藏这些选项，而不是禁用它们，但是在将 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" 我做了以下检查：

创建 checkcurrent 变量以便稍后在需要时修改它
是否禁用，如果是直接跳过
$currentselect 的值是否与 "select_order"
如果它具有相同的值，则将当前 "select_order" 更改为 $currentorder 值，然后允许更改 $currentselect
用新值更改 checkcurrent 以便 _current 具有每个正确的数字

下拉列表创建订单，每个下拉列表不能select相同的数字

Drop down list to create an order, cannot select the same number in each drop down list

javascript

jquery

web-applications