Création d'un bouton radio dynamique avec JQuery

Question

J'ai un projet dans lequel je dois donner aux utilisateurs plusieurs ensembles d'options de boutons radio différents en fonction d'une valeur donnée qu'ils sélectionnent dans un menu déroulant.

Par exemple ..

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

Je voudrais simplement ajouter/supprimer des options de (ou les deux) listes d'options de radio chaque fois qu'ils font une autre sélection.

Answer 1

Vous pouvez simplement le faire:

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

Il est dynamically creating une nouvelle entrée et l'insérer after l'last radio intérieur de l'élément #abc.

Answer 2

De Paolo poste de Bergantino essayer au lieu de:

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

Ce:

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