1

選択ボックスに基づくフォーム要素を含む div ボックスを表示するコードを作成しようとしています。この問題を説明する最も簡単な方法は、例を挙げることだと思います。

http://jsfiddle.net/544rc/1/ このフィドルを見ると。次のことを試してください。

最初にオプション 1 を選択すると、検索フォーム 1 が表示されます。これは正しいです。オプション 3 を選択すると、検索フォーム 1 と 2 が表示されます。これも正しいですが、オプション 1 をもう一度選択すると、検索フォームが表示されます。検索フォーム 1 が表示されるはずなのに、フォームが表示されません。

私は jQuery に関しては新人なので、私のスクリプトが見栄えがよくない場合は、その理由がわかります。

私のjQuery：

$(document).ready(function() {
$("#select").change(function() {

    var val = $(this).val();

    if (val == "value1" || val == "value2") { //check if value 1 or 2 are selected

        $("#search2").slideDown("fast"); //Slide Down Effect
        $("#search1").slideUp("fast");

    } else {

        $("#search1").slideUp("fast"); //Slide Down Effect
        $("#search1").slideUp("fast");

    }

    $("#select").change(function() {

        var val = $(this).val();

        if (val == "value3" || val == "value4" || val == "value5") { // check if value 3, 4 or 5 are selected

            $("#search1").slideDown("fast"); //Slide Down Effect
            $("#search2").slideDown("fast");

        } else {

            $("#search1").slideUp("fast"); //Slide Down Effect
            $("#search2").slideUp("fast");

        }
    });
});

}); </p>

HTML:

<form id="indexsearch" method="post" action="#"> <!-- searchform -->
        <div class="soortselect">
            <label for="select">Ik zoek:</label>
            <select name="select" id="select" > <!-- select box -->
                <option value="">(choice)</option>
                <option value="value1">option 1</option>
                <option value="value2">option 2</option>
                <option value="value3">option 3</option>
                <option value="value4">option 4</option>
                <option value="value5">option 5</option>
            </select>
        </div>

        <div class="hide" id="search1"> <!--hidden search form 1 -->
            <div class="soortselect">
                <label for="edu">Opleiding</label>
                    <input name="edu" type="text" id="edu" ><br />
            </div>
        </div>

        <div class="hide" id="search2"> <!-- hidden search form 2 -->
            <div class="soortselect">
                <label for="postal">Postcode</label>
                    <input name="postal" type="text" id="postal"><br />
                <label for="name">Name</label>
                     <input name="name" type="text" id="name"><br />
                    <input name="vind2" type="submit" id="vind" value="Vind!">
            </div>
        </div>
    </form>

何か案は？

4

1 に答える 1

1

この jsFiddle を試してください: http://jsfiddle.net/544rc/4/

私が見たところによると、else if ステートメントをもう 1 つ追加する必要がありました (値 3,4,5 のチェック)。

が再度選択されたときに上にスライドするelse ifをもう1つ追加しまし(choice)た。

更新された Javascript は次のとおりです。

$(document).ready(function() {

    //On Select Change...
    $("#select").change(function() {

        //Get Current Value
        var val = $(this).val();

        //If the value is the 1st or 2nd dropdown...
        if (val == "value1" || val == "value2") {
            //Slide down the second search form and slide up the first
            $("#search2").slideDown("fast"); //Slide Down Effect
            $("#search1").slideUp("fast");
        } 
        //If the value is the 3rd, 4th, or 5th dropdown...
        else if(val == "value3" || val == "value4" || val == "value5") {
            //Slide down both the forms
            $("#search1").slideDown("fast"); //Slide Down Effect
            $("#search2").slideDown("fast");
        } 
        //If the value is nothing (choice is selected)...
        else{
            //Slide up both forms
            $("#search1").slideUp("fast");
            $("#search2").slideUp("fast");
        }
    });
});​

else元の発言は必要ないので削除しました。

于 2012-08-02T18:37:57.730 に答える