Question

是否可以使用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>

Answer 1

此行无效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;
}

Answer 2

如果您的来源准确无误，那么关闭标签非常草率 - 请检查是否遗漏了</div>，我希望这会（通过Jimmy的评论）使其正常工作。

Answer 3

为什么要隐藏字段，在选择时创建字段，简单

联系表格中的隐藏字段

3 个答案: