Question

我有一个试图创建的预订表单，其中包含一个jquery日期选择器和一些下拉列表。我想让用户选择从日历中选择日期，然后根据他们在日历中选择的日期隐藏或显示其下方的几个下拉列表。每个下拉列表都是一个接一个地显示，但都是隐藏的，直到用户在datepicker中进行选择。每天都有一个下拉列表，有不同的选项。

我可以根据日期选择器中的用户选择显示/隐藏每个下拉列表，但我遇到的问题是每个不同的选择，相应的下拉框根据实际下拉列表的位置向下移动列表坐着。

如何制作它以便不显示下拉列表显示的内容，它始终显示在同一行？如果这有意义吗？

HTML表单：

             <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函数

      $(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

不完全确定您遇到的问题。无论如何，我用你的html和amp;创建了这个jsfiddle。 JS。我删除了br html标签并添加了hide css类定义。

 .hide { display: none;}

所有下拉列表都显示在datepicker输入正下方的行上。

但是，就像我说的那样，不完全确定你的目标： - ）

HTH。

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

1 个答案: