JQuery - создайте новые радиокнопки

Question

Хорошо, вот что у меня есть ... спасибо Паоло.
И это работает нормально, но только если у меня есть существующие варианты переключателей.

Что делать, если мне нужно создать НОВУЮ кнопку-переключатель без каких-либо уже существующих?

В конечном итоге я хочу создать массив параметров, просмотреть их и вывести список опций в виде переключателей. Итак, изначально внутри кнопки 'abc' НЕТ переключателей.

Заранее спасибо!

<script>
$(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: '2', id: 'test'
      });
      $(':radio:last-child', '#abc').after(radio).after('option 3 ');
  });
});

</script>

<form id='abcdef'>
  <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>
</form>

Answer 1

Хорошо, учитывая ваш обновленный вопрос, это следует сделать (или быть чертовски близко):

  $(function() {
    $("#aaa").change(function() {
      $('<input type="radio" name="colorInput" id="test" value="2">')
        .appendTo($("#abc")).before('Option 3');
    });
  });

Что нужно иметь в виду:

• Вы можете создать HTML непосредственно в конструкторе jQuery;
• Я предполагаю, что вы будете использовать динамические идентификаторы, значения и метки. Это просто вопрос объединения строк и переменных в выражении;
• Возможно, вам необходимо проверить наличие дубликатов (не описанных выше);
• Если вы помещаете их в div, как вам кажется, после подхода, описанного выше, а не того, что я первоначально предложил (т.е. $ (": radio: last")), так как он быстрее и понятнее и не полагается они уже существуют в качестве переключателя; и
• Вновь созданные HTML-элементы не будут иметь соответствующих обработчиков событий, если вы не используете обработчик событий jQuery 1.3 live ().

Answer 2

Вместо того, чтобы иметь дело с после и пытаться использовать append . Таким образом, вам не нужно проверять последнюю радиокнопку, и функциональность будет работать, когда при запуске установлено 0 радиокнопок.

var radio = $('<input>').attr({
      type: 'radio', name: 'colorinput', value: '2', id: 'test'
  });
$('#abc').append(radio.after('option 3'));

Answer 3

$(":radio:last").after('<input type="radio" name="blah">');