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