JQuery / Javascript冲突? - 根据选择选项不起作用显示/隐藏div

时间:2015-10-03 15:53:39

标签: javascript php jquery show-hide

我有一张预订表格,我想根据选择的选项中的号码添加多个服务员。

我在这里有自己的工作 - https://jsfiddle.net/dentjames/7buxvd87/1/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  

  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>

jQuery(function () {
    var $blocks = $('.block');
    $('#choices').change(function () {
        $blocks.slice(0, +this.value || 1).show();
        $blocks.slice(+this.value || 1).hide();
    }).change()
})

</script>

</head>
<body>
    <select id="choices">
        <option value="">Please choose number of children</option>
        <option value="1">1 Child</option>
        <option value="2">2 Children</option>
        <option value="3">3 Children</option>
        <option value="4">4 Children</option>
        <option value="5">5 Children</option>
    </select>
    <div id="block-1" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>First child</strong></div>
            </td>
        </tr>
          <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-2" class="block">
                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Second child</strong></div>
            </td>
        </tr>

             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-3" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Third child</strong></div>
            </td>
        </tr>
                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-4" class="block">
              <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Forth child</strong></div>
            </td>
        </tr>
               <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>
    <div id="block-5" class="block">
             <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text"><br><strong>Fifth child</strong></div>
            </td>
        </tr>

                <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* First Name:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cfname" type="text" id="Child First Name" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Surname:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="csname" type="text" id="Child Surname" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Sex:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <select name="csex" size="1" id="Child Sex">
              <option value="Boy">Boy</option>
              <option value="Girl">Girl</option>
            </select>
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">* Date of Birth:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cdob" type="text" id="Child Date of Birth" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" nowrap class="bodytext1">
                <div align="left" class="text">Age at time of booking:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cage" type="text" id="Child age at time of booking" size="40">
          </font></span>

                </div>
            </td>
        </tr>
        <tr valign="baseline">
            <td align="left" class="bodytext1">
                <div align="left" class="text">Current school:</div>
            </td>
            <td colspan="2" align="left">
                <div align="left"> <span class="text"><font color="#FFFFFF">
            <input name="cschool" type="text" id="Child current school" size="40">
          </font></span>

                </div>
            </td>
        </tr>
    </div>

</body>

</html>

但是当我将它合并到主窗体时,它不起作用。我确定与现有的javascript存在一些冲突,可能还有一些与php有关的问题。

整个表格可以在这里查看: http://whizzkidsclub.co.uk/horsham_bookingform_multiple.php

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

在url(whizkidsclub ...)中,id为block-1,block-2等的div不包含任何元素。第一个孩子,第二个孩子等的控制在div之外。 enter image description here

将控件移动到正确的div,它应该开始工作

编辑正如杰森所指出的那样,问题是div不能成为table元素的直接子元素。因此,解决此问题的一种方法是使用嵌套表。这是将<div id='block-1'>更改为<table id='block-1'>。那说我肯定必须有更好的方法......

此修复程序已演示here

答案 1 :(得分:1)

您的divblock-* id)被浏览器从table拉出并插入{{1}之前}。他们在那里空无一人。我不认为table被允许作为div的直接子女。看看这个:http://jsfiddle.net/f9t4qqmw/

来源:

table

检查:

<table>
    <div>
        <tr><td>1234</td></tr>
        <tr><td>abcd</td></tr>
    </div>
</table>