隐藏多个表单字段并防止空白

Question

I have a booking form im trying to create, which involves a jquery datepicker and a few dropdown lists. I want to give the user the option of choosing a date from the calendar, then either hide or show several dropdown lists below it based on the DAY they have chosen in the calendar. Each of the dropdown lists are presented one after the other, but are all hidden until the user makes a selection in the datepicker. There is one dropdown list for each day, with different options.

I can get the form to show / hide each dropdown list based on the users selection in the datepicker, but the problem I have is with each different choice, the corresponding dropdown box shuffles down the page, based on where the actual dropdown list sits.

How do I make it so that no mater what dropdown list is shown, it is always displayed on the same row? if that makes sense?

HTML Form:

             <input type="text" id="datepicker" />
             <div class="hide" id="hide1">
      <div class="input select">
              <select name="select1" id="Monday">
              <option value="1" selected="selected">(Monday)</option>
              <option value="2">10am - 12pm</option>
              <option value="3">1pm - 3pm</option>
              </select>
            </div></div>
            <br />
            <div class="hide" id="hide2">
      <div class="input select">
              <select name="select2" id="Tuesday">
              <option value="1" selected="selected">(Tuesday)</option>
              <option value="2">10am - 3pm</option>
              <option value="3">7:30pm - 10pm</option>
              </select>
            </div></div>
            <br />
            <div class="hide" id="hide3">
      <div class="input select">
              <select name="select3" id="Wednesday">
              <option value="1" selected="selected">(Wednesday)</option>
              <option value="2">10am - 3pm</option>
              </select>
            </div></div>
            <br />
            <div class="hide" id="hide4">
      <div class="input select">
              <select name="select4" id="Thursday">
              <option value="1" selected="selected">(Thursday)</option>
              <option value="2">10am - 3pm</option>
              </select>
            </div></div>
            <br />
           <div class="hide" id="hide5">
      <div class="input select">
              <select name="select5" id="Friday">
              <option value="1" selected="selected">(Friday)</option>
              <option value="2">1pm - 3pm</option>
              <option value="3">4pm - 6pm</option>
              <option value="4">7:30pm - 10pm</option>
              </select>
            </div></div>
            <br />
            <div class="hide" id="hide6">
      <div class="input select">
              <select name="select6" id="Saturday">
              <option value="1" selected="selected">(Saturday)</option>
              <option value="3">1:30pm - 3:30pm</option>
              <option value="4">8pm - 10pm</option>
              </select>
            </div></div>
            <div class="hide" id="hide7">
      <div class="input select">
              <select name="select7" id="Sunday">
              <option value="1" selected="selected">(Sunday)</option>
              <option value="2">10am - 12pm</option>
              <option value="3">1:30pm - 3:30pm</option>
              </select>
            </div></div>

jquery function to hide / show the dropdown lists

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

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

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

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


    } else {


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

    } 

});

});

Answer 1

Not entirely sure what you are having trouble with. Anyway, I created this jsfiddle with your html & js. I removed the br html tags and added the hide css class definition.

 .hide { display: none;}

The dropdowns all appear on the row just beneath the datepicker input.

But, like I said, not entirely sure of your goal here :-)

HTH.