使用无线电输入添加更多表单元素逻辑

时间:2015-06-20 02:44:02

标签: javascript jquery html

我编写了一些代码,用户可以点击add more复制所有表单元素并添加值。除无线电输入外,它的工作正常。我被卡住了。如何以简单的方式解决我的问题?以下是我的代码。

<div id="dup">
    <p>
        Athlete Name:<br>
        <select name="athlete_name" id="athlete_name[]">
            <option value="" selected="selected">Choose a user</option>
            <option value="2">Candice Falzon</option>
            <option value="5">Athlete Example</option>
        </select>
    </p>

    <p>
        Sex: 
        <input type="radio" name="athlete_sex" value="Male">Male 
        <input type="radio" name="athlete_sex" value="Female">Female
    </p>
</div>

我不能将athlete_sex作为数组。

1 个答案:

答案 0 :(得分:0)

有时jQuery可以成为关闭标签的坚持者。我修复了它们,现在它可以工作了:

&#13;
&#13;
    var clone = $('#dup:last').clone();

    window.addAnother = function() {
      clone.find('input').attr('name', 'athlete_sex' + ($('#wrapper').children().length + 1));
      $('#wrapper').append(clone);
      clone = clone.clone();
    }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="dup">
    <p>Athlete Name:
      <br />
      <select name="athlete_name" id="athlete_name[]">
        <option value="" selected="selected">Choose a user</option>
        <option value="2">Candice Falzon</option>
        <option value="5">Athlete Example</option>
      </select>
    </p>

    <p>Sex:
      <input type="radio" name="athlete_sex" value="Male" />Male
      <input type="radio" name="athlete_sex" value="Female" />Female</p>
  </div>
</div>
<button onclick="addAnother()">Add Another</button>
&#13;
&#13;
&#13;