динамически создают переключатели?

Question

Ссылаясь на creating dynamic radio button w/ JQuery, я думал, как это можно обработать, если входное значение («красный» или «синий») извлекается из базы данных при загрузке страницы.

Взяв тот же пример из приведенной выше ссылки, если красный, синий или другие динамические значения, как мы можем создавать переключатели на лету - красный = 1 радиокнопка, синий = 2 переключателя ... и т. Д.? Я новичок в этом. В настоящий момент я использую grails, чтобы попробовать это. Есть ли способ jquery-ish сделать это? Я не нашел никаких тегов в граале, чтобы реализовать это!

EDIT: Я указал RadioGroup (Grails тег), что я намерен иметь это класс, основанный на CSS (который содержит GIF), содержащих различные изображения, которые должны быть показаны на основе различных значений. - что-то похожее на показ звездный рейтинг из базы данных (не на основе выбора пользователя) - красный/синий и т.д.

<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

Если вы действительно хотите сделать это на странице загрузки (т.е. не в ответ на запрос AJAX), то вам не нужен JQuery, вам нужен тег grails radioGroup с параметрами values и labels, заполненными результатом запроса базы данных.

Answer 2

Попробуйте это:

$(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); 
     }); 
    });