1

我试图隐藏一个按钮，直到两个选择框都有一个项目选择。

<select id="comType">
    <option>-- Select --</option>
    <option>Call</option>
    <option>Fax</option>
    <option>Email</option>
</select>
<select id="comDirection">
    <option>-- Select --</option>
    <option>Incoming</option>
    <option>Outgoing</option>    
</select>

<a href="#" id="button_that_displays_only_when_both_selects_have_input">Next</a>

我目前正在使用的，但我知道是不对的。

<script>
$(document).ajaxSuccess(function () {
    if ($("#comType").change()) || ($("#comDirection").change()))
    { $("#button_that_displays_only_when_both_selects_have_input").show()}
});
</script>

如果这可以确保实际选择，例如，不允许第一个选择选项计数，因为它们只是占位符，那将是一个额外的好处....

谢谢，马克

4

2 回答 2

1 
// take both inputs and bind this function to the change event of both
$("#comType, #comDirection").on('change', function () {
    // show the button if they both have a value
    if ($("#comType").val().length > 0 && $("#comDirection").val().length > 0) {
        $("#button_that_displays_only_when_both_selects_have_input").show();
    }
});

由于条件是检查值的长度，一旦您正确设置了选项，它只会在选择项选择了实际值时显示按钮。

IE

value 的长度为 0，按钮不会显示：

<option value="">Placeholder</option>

value 的长度是 3，所以按钮会显示（如果另一边的条件也满足的话）：

<option value="fax">Fax</option>
于 2013-09-29T14:38:18.307 回答
0

此解决方案将第一个选项 ("-- Select --") 解释为无效，与它和其他选项文本内容无关。

使用 jQuery 1.8.1 和 2.0.3 进行测试，使用浏览器 Firefox 24.0/Linux、Opera 12.16/Linux、Chrome 29.0.1547.76/Linux。

<!DOCTYPE html>
<html>
<head>
    <title>Option select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="PATH_TO_jQuery"></script>
    <script type="text/javascript">

        function bothSelectsAreValid() {
            return $("#comType")[0].selectedIndex > 0 && $("#comDirection")[0].selectedIndex > 0;
        }

        function setButtonVisibility() {
            if (bothSelectsAreValid())
                $("#button_that_displays_only_when_both_selects_have_input").show();
            else
                $("#button_that_displays_only_when_both_selects_have_input").hide();
        }

        $(document).ready(function() {
            $("#comType, #comDirection").on('change', function() {
                setButtonVisibility();
            });
            setButtonVisibility(); // needed if browser presets the selected values on reload
        });
    </script>
    <style type="text/css">
        #button_that_displays_only_when_both_selects_have_input { display : none; }
    </style>
</head>
<body>
    <select id="comType">
        <option selected="selected">-- Select --</option>
        <option>Call</option>
        <option>Fax</option>
        <option>Email</option>
    </select>
    <select id="comDirection">
        <option selected="selected">-- Select --</option>
        <option>Incoming</option>
        <option>Outgoing</option>    
    </select>
    <a href="#" id="button_that_displays_only_when_both_selects_have_input">Next</a>
</body>
</html>
于 2013-09-30T16:43:06.463 回答