若要创建订单，则无法在每个下拉列表中选择相同的编号。

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

这是一种合适的方式吗？还是已经有办法这么做了？

Answer 1

谢谢你的回答，

但这些不是我要找的。

我就是这样做的：

首先，我已经有一个隐藏的字段用于另一个目的(我忘了在这里提到)。

$('.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. 创建校验当前变量，以便在需要时修改它。
2. 如果只是跳过它，它会被禁用吗？
3. $currentselect值是否具有"select_order“的相同值？
4. 如果它具有相同的值，则使用$currentorder值更改当前的“$currentorder”，然后允许对$currentselect的更改。
5. 用新值更改校验电流，以便_current为每个值都有合适的数字

Answer 2

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

Answer 3

我正在使用与charlietfl的解决方案类似的想法，但我使用了一些不同的路径……我的代码禁用了在不同下拉列表中已经选择的任何选项。像他的一样，我的代码还要求您有一个没有值的选项(如果需要，可以避免这种情况，但如果您可以添加这样的默认选项，代码就会变得更加简单)。

<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上显示)时存在浏览器支持问题。