Question

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

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

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

谢谢，标记

Answer 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();
    }
});

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

即

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

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

值的长度为3，因此按钮将显示（如果条件的另一侧也满足）：

<option value="fax">Fax</option>

Answer 2

此解决方案将第一个选项（“ - 选择 - ”）解释为无效，与其选项和其他选项文本内容无关。

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

如何在1 if语句中有多个条件

2 个答案: