I am perplexed as to why the element inside the does not appear when a value is selected in the drop down box. However, it works perfectly fine in JSFiddle: JSFiddle
Below is my HTML code and Jquery script that functions properly in my own system:
<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:
<script type="text/javascript">
$(document).ready(function(){
$("#registration").change(function(){
if($(this).val()=="Yes"){
$("#opt").show();
}else {
$("#opt").hide();
}
});
});
</script>
The expected output is as follows:
If the value "No" is selected, nothing should be displayed.