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

条件は値の長さをチェックしているため、オプションを正しく設定すると、選択に実際の値が選択されている場合にのみボタンが表示されます。

すなわち

値の長さが 0 の場合、ボタンは表示されません:

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

値の長さは 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 に答える