dynamically create radio buttons?

Question

Referring to http://stackoverflow.com/questions/702925/creating-dynamic-radio-button-w-jquery , I was thinking how can this be handled if the input value('red' or 'blue') is retrieved from the database on a page load.

Taking the same example from the above link, if Red, blue or other dynamic values, how can we build radio buttons on the fly - Red = 1 radio button, blue = 2 radio buttons...etc? I am new to this. I am using grails at the moment to try this out. Is there a jquery-ish way to do it? I didn;t find any tags in grails to implement this!

EDIT: I was pointed out to radioGroup(grails tag), what I intend to have is a CSS based class(that contains a gif), containing different images that need to be shown based on different values. - something similar to showing star-rating from a database(not based on user selection) - red/blue etc.

<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>

Answer 1

If you really want to do this on page load (i.e. not in response to an AJAX request), then you do not need JQuery, you need the radioGroup grails tag, with the values and labels parameters filled by your database query result.

Answer 2

Try this:

$(function(){ //$(document).ready(function(){ // same thing
    var colors=[];
    colors['red']=1;
    colors['blue']=2;
    colors['other']=3;
    $('#aaa').change(function(){
        var value = $(this).val();
        $('#abc, #def').find('input')
            .removeClass('red')
            .removeClass('blue')
            .removeClass('other');
        $('#abc, #def').find('input[value=' + colors[value] + ']).addCLass(value);
        });
    });