2

jQuery を使用して、ドロップダウン メニューからのさまざまな選択に基づいて非表示のフィールドを表示することは可能ですか?

複数の非表示フィールドのコードを書くのに問題があります。

基本的に、「select 1」のすべての選択を割り当てて、「hide3」または「hide4」を割り当てて、同じフィールドセット内の異なるフィールドを表示する必要があります。

  <script type="text/javascript">
 $(document).ready(function(){
 $("#select1").change(function(){


    if ($(this).val() == "retouching" ) {

        $("#hide1").slideDown("fast"); 


    } else {

        $("#hide1").slideUp("fast");  

    }


});

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

    if ($(this).val() == "fashion" || $(this).val() == "beauty" || $(this).val() == "product" || $(this).val() == "architectural") {

        $("#hide2").slideDown("fast");

    } else {

        $("#hide1").slideUp("fast"); 


    }

});
$("#select1").change(function(){


    if ($(this).val() == "photography" ) {

        $("#hide3").slideDown("fast"); 


    } else {

        $("#hide3").slideUp("fast");  

    }


});

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

    if ($(this).val() == "fashion" || $(this).val() == "beauty" || $(this).val() == "product") {

        $("#hide4").slideDown("fast");

    } else {

        $("#hide3").slideUp("fast"); 


    }
});
    $("#select1").change(function(){


    if ($(this).val() == "studio" ) {

        $("#hide5").slideDown("fast"); 


    } else {

        $("#hide5").slideUp("fast");  

    }


});
});
</script>


  <fieldset>
         <legend>Project Details</legend>
          <div class="input select">

    <dl>
        <dt><label for="select1">Subject:</label></dt>
        <dd>
        <select name="select1" id="select1">
            <option value="">(choose one)</option>
            <option value="photography">Photography</option>
            <option value="retouching">Retouching</option>
            <option value="studio">Studio Rental</option>
        </select>
        </dd>
        </dl>
</div>

    <div class="hide" id="hide1">
        <div class="input select">

        <dl>
            <dt><label for="select2">Type:</label></dt>
            <dd>
            <select name="select2" id="select2">
                <option value="">(choose one)</option>
                <option value="fashion">Fashion</option>
                <option value="beauty">Beauty</option>
                <option value="product">Product</option>
                <option value="architectural">Architectural</option>
            </select>
            </dd>
        </dl>

</div>
</div>


    <div class="hide" id="hide2"> 
        <div class="input select">  

             <dl>
        <dt><label for="budget">Budget:</label></dt>
        <dd><input type="text" name="budget" id="budget" size="32" maxlength="128" /></dd>
    </dl>
    <dl>


        <dt><label for="message">Message:</label></dt>
        <dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
    </dl>
    <dl>
        <dt><label for="upload">Upload a File:</label></dt>
        <dd><input type="file" name="upload" id="upload" /></dd>
    </dl>
</div>
</div>



    <div class="hide" id="hide3">
        <div class="input select">

        <dl>
            <dt><label for="select3">Type:</label></dt>
            <dd>
            <select name="select3" id="select3">
                <option value="">(choose one)</option>
                <option value="fashion">Fashion</option>
                <option value="beauty">Beauty</option>
                <option value="product">Product</option>
            </select>
            </dd>

        </dl>
  </div>
  </div>


    <div class="hide" id="hide4"> 
        <div class="input select">
             <dl>
        <dt><label for="budget">Budget:</label></dt>
        <dd><input type="text" name="budget" id="budget" size="32" maxlength="128" /></dd>
    </dl>
    <dl>


        <dt><label for="message">Message:</label></dt>
        <dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
    </dl>
    <dl>
        <dt><label for="upload">Upload a File:</label></dt>
        <dd><input type="file" name="upload" id="upload" /></dd>
    </dl>
    </div>
    </div>


    <div class="hide" id="hide5">
        <div class="input select">

    <dl>
        <dt><label for="message">Message:</label></dt>
        <dd><textarea name="comments" id="comments" rows="5" cols="60"></textarea></dd>
    </dl>
    </div>
    </div>

</fieldset>
4

3 に答える 3

2

この行は有効な Javascript ではありません:

if ($(this).val() == "fashion", "beauty", "product" )

これを次のように変更できます。

if ($(this).val() == "fashion" || $(this).val() == "beauty" || $(this).val() == "product")

または、（私の意見では、より良い）他の方法：

switch ($(this).val())
{
    case "fashion":
        // do stuff
        break;
    case "beauty":
        // do stuff
        break;        
    case "product":
        // do stuff
        break;
}
于 2011-04-17T20:34:58.793 に答える
0

ソースが正確である場合、終了タグが非常にずさんです-不足していないか確認してください</div>。これで（ジミーのコメントで）うまくいくと思います。

于 2011-04-17T20:37:01.107 に答える
0

フィールドを非表示にしたいのはなぜですか、選択が行われたときに作成するのは簡単です

于 2011-04-17T20:57:35.543 に答える