0

ドロップドロウボックスで値が選択されている場合、なぜ内部の要素が表示されなかったのだろうか?しかし、それは 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 が選択されている場合、何も表示されません。

4

1 に答える 1

2

#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>
于 2013-08-18T11:03:28.903 に答える