Question

I have a project where I need to give the users several different sets of radio button options based on a given value they select in a drop down menu.

For instance..

<select id="aaa">
<option>red</option>
<option>blue</option>
<option>other</option>
</select>

<div id="abc">
Input<BR>
option 1 <input type="radio" name="colorinput" value="1" />
option 2 <input type="radio" name="colorinput" value="2"  />
</div>
<BR>
<div id="def">
Description<BR>
option 1 <input type="radio" name="colordesc" value="1" />
option 2 <input type="radio" name="colordesc" value="2" />
</div>
<BR>

I would simply like to add/remove options from either(or both) lists of radio options each time they make a different selection.

Answer 1

You can just do this:

$(document).ready(function() {
    // add a new input when a new color is chosen, for example
    $('#aaa').change(function() {
        var radio = $('<input>').attr({
            type: 'radio', name: 'colorinput', value: '3'
        });
        $(':radio:last-child', '#abc').after(radio).after('option 3 ');
    });
});

It is dynamically creating a new input and inserting it after the last radio inside the #abc element.