如果在下拉框中选择了一个值，为什么不在<div>中显示元素？</div>

Question

我只是想知道为什么如果在drop drown框中选择了一个值，它内部的元素没有出现？但它在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>