Question

我试图在我的驾驶室里做一些事情，我希望主要是在概念上指向正确的方向（当然，代码永远不会伤害）。

在cshtml页面中，我有 n 数量的下拉列表，每个列表的值为1,2,3 ... n。我不希望任何下拉列表包含与页面上的另一个相同的值。我正在寻找一种使用Javascript动态执行此操作的方法。

有没有聪明的方法可以做到这一点？我可以想到一个非常丑陋的算法，包括每次下拉列表中的一个更改值时，遍历每个下拉列表，查找具有相同值的任何下拉列表，并向其添加1（如果我们滚动到1）在n）。然后必须再次检查，更改我们运行的下一个列表，其值与前一个相同。最终，我们将在每个列表n次后停止（运行时间O（n ^ 2））。即使没有巧妙的方法，我也无法想象这是一个接近最佳解决方案的地方。

任何建议都将非常感谢。感谢。

Answer 1

在javascript中有一个值数组，每次下拉列表更改时，请执行以下操作：

检查数组中是否已存在该值，如果存在则阻止该操作。
将新选区存储在数组中。

可能还有更多内容（例如，您可能还需要将值的源下拉列表ID存储在数组中，因此如果下拉列表第二次更改，您需要知道需要删除哪个值），但这一般想法应该简单而有效。

Answer 2

如果我理解正确，它可能比它看起来更容易。

我知道你有n（让他们说3）下拉列表，分别选择1,2,3。但是，如果您在第一个下拉列表中选择3，则需要使用第三个下拉列表防止重复3。但您可以尝试按值查找此重复项，并将其值设置为您要更改的下拉列表的旧值。

E.g。使用jQuery：http://www.w3schools.com/jquery/sel_attribute_equal_value.asp

$("[value=3]").attr("value", 1)

这应该保持没有重复的状态，否则，你可能需要根据找到的元素数量做一些聪明的事情，比如设置为未选择。

Answer 3

使用jquery，添加处理程序以获取旧值和新值。然后，您可以在所有其他选择中启用旧值，并禁用新值。这需要一些脚本魔术，但这篇文章将有助于： getting value of select dropdown before change

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

        var valueToEnable;
        var defaultValue = '0';

        $('.theDropdowns').on('focus', function () {
            valueToEnable = this.value;
        }).blur(function() {
            $('.theDropdowns option[value=' + valueToEnable + ']').removeAttr('disabled');
            var valueToDisable = this.value;
            if (valueToDisable != defaultValue) {
                $('option[value=' + valueToDisable + ']', $('.theDropdowns').not(this)).attr('disabled', 'disabled');
            }
        });
    });         
    </script>
</head>
<body>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <select class="theDropdowns">
        <option value="0">Select a value</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</body>

使用cshtml和javascript动态更改下拉列表

3 个答案: