I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this?
.sub{display:none;}
<script type="text/javascript>
var $subs = $('select.sub');
$('select').first().change(function () {
$subs.hide();
if (this.selectedIndex > 0)
$subs.eq(this.selectedIndex - 1).show();
}).change();
</script>
<select><--!main select box-->
<option value="">select</option>
<option> one</option>
<option> two </option>
</select>
<select class="sub">
<option> one 1</option>
<option> one 2</option
</select>
<select class="sub">
<option> two 1</option>
<option> two 2</option>
</select>
Instead of using two select boxes as shown above, this is the desired layout:
<div class="sub">
<input type="radio">one 1
<input type="radio">one 2
</div>
<div class="sub">
<input type="radio">two 1
<input type="radio">two 2
</div>