|
JQuery to show/hide elements and toggle between them. |
I have a form with a radio button on it to select from two different sets of options.
Each radio button should dynamically load the correct set of options into a select box. Since one select box is filled with static options, and the other is filled with database records, using AJAX to dynamically populate the select box based on the selected radio button didn't seem like the right thing to do.
Instead, I loaded both select boxes, and used JQuery to toggle which one is visible, based on the selected radio button.
HTML:
<tr>
<td class='heading'>Select List Type : </td>
<td>
System List<input type='radio' name='list' value='system'></input>
User Defined List<input type='radio' name='list' value='user' checked></input>
</td>
</tr>
<tr>
<td class='heading'>Group : </td>
<td>
<div id='usergroups'>
<?php echo form_dropdown('usergroups',$field_usergroups); ?>
</div>
<div id='systemgroups'>
<?php echo form_dropdown('systemgroups',$field_systemgroups);?>
</div>
</td>
</tr>
<script language='javascript'>
$(document).ready(function() {
$('#systemgroups').hide();
});
$("input[name=list]").bind('click', function() {
$('#usergroups')[this.value=='user'?'show':'hide']('fast');
$('#systemgroups')[this.value=='system'?'show':'hide']('fast');
});
</script>
|
