Question

该应用程序有五个具有相同内容的下拉列表，但用户无法选择相同的内容两次。

可以通过服务器端验证来完成，但我想知道是否有可能：当用户在一个下拉列表中选择一个选项时，它会隐藏（不显示）在其他选项中。

有什么想法吗？

Answer 1

试试这个：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
            $(function() {
                $("select.xx").change(function() {
                    $("select.xx option").show();

                    $("select.xx").each(function() {
                        if (!$(this).val() == "") {
                            $("select.xx").not($(this)).find("option").filter("[value='" + $(this).val() + "']").hide();
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <select class="xx">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>

        <select class="xx">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>

        <select class="xx">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>

        <select class="xx">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>

        <select class="xx">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>

    </body>  
</html>

Answer 2

试试这个会起作用

var rowHide = document.getElementById('rowid');
rowHide.style.display = 'none';

Answer 3

此代码可以为您提供帮助，

$('#select1').on('change',function(){
    $('#select2 option[value="'+$(this).val()+'"').remove();
    // remove the matched value from other drop down box
});

Answer 4

我在这里创建了一个示例解决方案，您可能会发现有用的jsfiddle

使用此代码：

$('.select').change(function(){
   $('.'+$(this).val()).attr("disabled", "disabled");
});

更改选择后，它会禁用所有其他选择中的相应值。假设类的on元素在jsfiddle示例中设置

如何根据使用JavaScript的用户选择禁用下拉列表中的值

4 个答案: