使用cshtml和javascript动态更改dropdownlist

Changing dropdownlist dynamically with cshtml and javascript

本文关键字：dropdownlist 动态 javascript cshtml 使用      更新时间：2023-09-26

我正在尝试做一些有点超出我掌控范围的事情，我主要希望在概念上指向正确的方向（当然，代码永远不会有坏处）。

在cshtml页面中，我有n个下拉列表，每个下拉列表的值为1、2、3…n。我不希望任何下拉列表包含与页面上其他下拉列表相同的值。我正在寻找一种使用Javascript动态实现这一点的方法。

有什么聪明的方法可以做到这一点吗？我可以想到一个非常丑陋的算法，每次下拉列表中的一个更改值时，都要遍历每个下拉列表，查找任何具有相同值的下拉列表，并向其中添加1（如果我们处于n，则滚动到1）。然后必须再次进行，以使用与上一个相同的值更改我们遇到的下一个列表。最终，我们会在每个列表中执行n次之后停止（运行时间O（n^2））。即使没有一种聪明的方法来做到这一点，我也无法想象这接近于最佳解决方案。

任何建议都将不胜感激。谢谢

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

  1. 检查该值是否已存在于数组中，如果存在，则阻止该操作
  2. 将新选择存储在阵列中

它可能还有更多功能（例如，您可能还需要将值的源dropdownlist ID存储在数组中，这样您就知道如果dropdownlists第二次更改，您需要删除哪个值），但这个总体想法应该简单高效。

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

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

例如，使用jQuery：http://www.w3schools.com/jquery/sel_attribute_equal_value.asp

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

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

使用jquery，添加一个处理程序来获取旧值和新值。然后，您可以在所有其他选择中启用旧值，并禁用新值。这需要一些脚本技巧，但这篇文章将有所帮助：在更改之前获取选择下拉列表的值

<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>

相关文章：