Скрытые поля в контактной форме

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

Почему вы хотите скрыть поля, создать их, когда выбор сделан, просто

Answer 3

Если ваш источник точен, вы очень неряшливы с закрывающими тегами - проверьте на отсутствие </div>, я ожидаю, что это (с комментарием Джимми) заставит его работать.