Question

好的，这就是我到目前为止...感谢Paolo 它工作正常，但只有我有现有的单选按钮选项。

如果我需要创建一个没有任何预先存在的新单选按钮怎么办？

最终我想要做的是创建一个选项数组，循环它们并输出作为单选按钮的选项列表。所以最初，“abc”div中没有单选按钮。

提前致谢！

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

要记住的事情：

您可以直接在jQuery构造函数中构建HTML;
我假设您将使用动态ID，值和标签。这只是在表达式中连接字符串和变量的问题;
您可能需要检查重复项（上面没有介绍）;
如果你把它们放在像你看起来那样的div中，在上面的方法之后而不是我最初的建议（即$（“：radio：last”））因为它更快更清晰而且不依赖于他们已经是一个单选按钮;和
除非您使用jQuery 1.3 live（）事件处理程序，否则新构造的HTML元素将不会有任何相关的事件处理程序。

Answer 2

而不是处理after并尝试使用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">');

JQuery - 创建新的单选按钮

3 个答案: