jquery - 为什么没有在里面显示元素如果在下拉框中选择了一个值？

Question

我只是想知道如果在下拉框中选择了一个值，为什么里面的元素没有显示出来？但它在 JSFiddle 中工作正常：JSFiddle

下面展示了我的 HTML 代码和 Jquery 脚本如何在我自己的系统中工作：

<tr>
                <th class="title">Registration</th>
                <td> : </td>
                <th><select name="reg" id="registration">
                        <option value="No">No</option>
                        <option value="Yes">Yes</option>
                    </select>
                </th>
            </tr>
            <div id="opt" style="display:none;">
            <tr>
                <th class="title">Participant</th>
                <td> : </td>
                <th><input type="text" name="participant"></th>
            </tr>

            <tr>
                <th class="title">Payment Amount</th>
                <td> : </td>
                <td><input type="text" name="amount"></td>
            </tr>

            <tr>
                <th class="title">Payment Method</th>
                <td> : </td>
                <td><input type="radio" name="pay_method" value="CC">Credit Card
                <input type="radio" name="pay_method" value="Counter">Counter
                </td>
            </tr>
            </div><!--end of the opt-->

jQuery脚本：

<script type="text/javascript">
$(document).ready(function(){

 $("#registration").change(function(){
 if($(this).val()=="Yes"){
            $("#opt").show();
       }else {
        $("#opt").hide();   
       }

 });      
}); 

   </script>

示例输出如下：

假设选择值no时，它不会显示任何内容，

Answer 1

如果这是您的表格的完整标记，您可以#opt完全删除该元素并执行以下操作：

<script type="text/javascript">
$(document).ready(function(){

 $("#registration").change(function(){
 if($(this).val()=="Yes"){
            $("tr + tr").show();
       }else {
        $("tr + tr").hide();   
       }

 });      
}); 
</script>

否则，杠杆的建议<tbody是一个很好的建议：

    <tr>
            <th class="title">Registration</th>
            <td> : </td>
            <th><select name="reg" id="registration">
                    <option value="No">No</option>
                    <option value="Yes">Yes</option>
                </select>
            </th>
        </tr>
        <tbodyid="opt" style="display:none;">
        <tr>
            <th class="title">Participant</th>
            <td> : </td>
            <th><input type="text" name="participant"></th>
        </tr>

        <tr>
            <th class="title">Payment Amount</th>
            <td> : </td>
            <td><input type="text" name="amount"></td>
        </tr>

        <tr>
            <th class="title">Payment Method</th>
            <td> : </td>
            <td><input type="radio" name="pay_method" value="CC">Credit Card
            <input type="radio" name="pay_method" value="Counter">Counter
            </td>
        </tr>
        </tbody><!--end of the opt-->

 <script type="text/javascript">
 $(document).ready(function(){

  $("#registration").change(function(){
  if($(this).val()=="Yes"){
            $("#opt").show();
       }else {
        $("#opt").hide();   
       }

  });      
 }); 
</script>