-2

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

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

有任何想法吗？

4

4 回答 4

1

试试这个它会工作

var rowHide = document.getElementById('rowid');
rowHide.style.display = 'none';
于 2013-07-09T12:35:30.103 回答
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>
于 2013-07-09T12:26:19.113 回答
0

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

它使用此代码：

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

当一个选择被改变时，它会禁用所有其他选择的相应值。假设类的 on 元素的设置就像在 jsfiddle 示例中一样

于 2013-07-09T12:07:45.960 回答
0

这段代码可以帮助你，

$('#select1').on('change',function(){
    $('#select2 option[value="'+$(this).val()+'"').remove();
    // remove the matched value from other drop down box
});
于 2013-07-09T11:52:20.713 回答