creating dynamic radio button w/ JQuery

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.

Small point, but for valid XHTML your <BR>s should really be <br />s. — da5id
– da5id, Commented Mar 31, 2009 at 20:47

Paolo Bergantino · Accepted Answer · 2009-03-31 21:26:14Z

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.

edited Mar 31, 2009 at 21:26

answered Mar 31, 2009 at 20:37

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jason Over a year ago

I think this is exactly what I'm looking for. I can't seem to get it to work though. No errors or anything.. just doesn't add the radio option.

Paolo Bergantino Over a year ago

Did you get my latest revision? I tested it on a page with the HTML you have and it works.

Jason Over a year ago

yes I got it.. but for some reason it doesn't seem to want to work. Any ideas to what it could be on my end?

Paolo Bergantino Over a year ago

No idea. Nothing happens when you change the select? I'll upload a working version in a second....

Paolo Bergantino Over a year ago

Ooo, I know what. You have to wrap your code around document.ready

|

Harry · Accepted Answer · 2013-09-28 04:15:16Z

0

From Paolo Bergantino's post try instead of:

$(':radio:last-child', '#abc').after(radio).after('option 3 ');

This:

$(':radio:last-child', '#abc').after(radio).after('option:eq(2)');

edited Sep 28, 2013 at 4:15

Harry

90.1k26 gold badges216 silver badges224 bronze badges

answered Jun 8, 2009 at 19:33

Lathan

8534 silver badges14 bronze badges

Collectives™ on Stack Overflow

creating dynamic radio button w/ JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related