3

私はjQueryを初めて使用し、ユーザーがドロップダウン選択ボックスから選択した内容に応じてオプションを表示および非表示にするフォームを作成しようとしています。私はここで検索しましたが、私のために働く解決策をまだ見つけていません。基本的に私が望んでいたことを実行するチュートリアルを見つけましたが、それは選択したボックスにのみ適用されるようです。どんな助けでも大歓迎です。

これは私が使用しているHTMLコードです。

$(document).ready(function(){
    $("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#test1").slideDown("slow");
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#test2").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#test3").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

これは私が使用しているHTMLコードです。

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="test2">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="test3">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="test3"><div id="prompt">Orginization Location Remove:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

なぜdivが表示されないのか理解できません。私がインラインスタイルを設定した唯一のものをテストするために、display：none;になるようにedithiddenします。その1つには影響はありませんが、removehiddenは、選択ボックスだけを1秒間表示してから、上にスライドします。

何か案は？

前もって感謝します。

編集

改訂されたjQueryコード：

$(document).ready(function(){
$("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#edithidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#removehidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

改訂されたHTMLコード：

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="editcontent">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden" style="display:none;">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="removecontent">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

ここで、[編集]を選択すると、非表示のスライドのセクションが下にスライドしますが、選択ボックスが表示されません。[追加]に戻すと、編集が滑り落ちたゴミが隠されません。少なくともある程度の進歩はあると思います。これまでのすべてのご協力に改めて感謝いたします。

4

1 に答える 1

0

この.slideDown()メソッドは、一致した要素の高さをアニメーション化します。これにより、ページの下部が下にスライドし、表示されたアイテムに道を譲ります。

そもそも要素をどのように隠しているのかを教えてくれるものは何もありません。単に使用し.show()、.hide()動作するはずです。

于 2012-12-05T15:56:36.840 に答える