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

Question

У меня есть проект, в котором мне нужно предоставить пользователям несколько различных наборов опций переключателей, основываясь на заданном значении, которое они выбирают в раскрывающемся меню.

Например ..

<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

Вы можете просто сделать это:

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

динамически создает новый вход и вставляет его после последнего радио внутри элемента #abc.

Answer 2

Из поста Паоло Бергантино попробуйте вместо:

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

Это:

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