如何使用JavaScript添加另一个名称值递增的输入字段？

Question

我有两个下拉列表和两个单选按钮组。我想要的是添加另一个下拉和单选按钮，并更新其名称值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 var i = 1;
  function textBoxCreate(){
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("Placeholder", "Name_" + i);
y.setAttribute("Name", "Name_" + i);
document.getElementById("myForm").appendChild(y);
i++;
}

<label for="cars">Choose a car:</label>
  <select name="cars" name="CARS_1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label for="cars">Choose a range:</label>
  <input type="radio"  name="RANGE_1" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio" name="RANGE_1" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio"  name="RANGE_1" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>

  <label for="cars">Choose a car:</label>
  <select name="cars"  name="CARS_2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label for="cars">Choose a car:</label>
  <input type="radio"  name="RANGE_2" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio"  name="RANGE_2" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio"  name="RANGE_2" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>
  <button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>

如何使用JavaScript增加输入字段的名称值？我不想用克隆人。

Answer 1

您需要为每个控件提供唯一的id和名称。因此，根据您的代码，更改id和名称的唯一性，并检查以下代码。将代码包装在任何控件中(我采用div)，在该控件中最后添加html。

另外，您也没有为remove添加，如果需要，那么您可以对add做同样的操作，只需选择索引并删除具有当前索引no的内容。

​

var indexToStart=3; //here we start with 3 as we already have 2 set of controls
function addAnotherOne(){
var strBuildHtml = '<label >Choose a car:</label> \
  <select id="cars'+ indexToStart +'" name="cars'+ indexToStart +'">  \
    <option value="volvo">Volvo</option>  \
    <option value="saab">Saab</option>  \
    <option value="opel">Opel</option>  \
    <option value="audi">Audi</option>\
  </select><br>\
 <label >Choose a car:</label>\
  <input type="radio" id="age'+ indexToStart +'-1" name="age'+ indexToStart +'" value="30">\
  <label for="range'+ indexToStart +'-1">0 - 30</label><br>\
  <input type="radio" id="age'+ indexToStart +'-2" name="age'+ indexToStart +'" value="60">\
  <label for="range'+ indexToStart +'-2">31 - 60</label><br>  \
  <input type="radio" id="age'+ indexToStart +'-3" name="age'+ indexToStart +'" value="100">\
  <label for="range'+ indexToStart +'-3">61 - 100</label>\
  <br><br>'
$("#dvHtml").append(strBuildHtml);
 indexToStart = indexToStart+1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='dvHtml' >
<label >Choose a car:</label>
  <select  id="cars1" name="cars1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label >Choose a range:</label>
  <input type="radio" id="age1-1" name="age1" value="30">
  <label for="range1-1">0 - 30</label><br>
  <input type="radio" id="age1-2" name="age1" value="60">
  <label for="range1-2">31 - 60</label><br>  
  <input type="radio" id="age1-3" name="age1" value="100">
  <label for="range1-3">61 - 100</label>
  <br><br>

  <label >Choose a car:</label>
  <select id="cars2" name="cars2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br>
 <label >Choose a car:</label>
  <input type="radio" id="age2-1" name="age2" value="30">
  <label for="range-1">0 - 30</label><br>
  <input type="radio" id="age2-2" name="age2" value="60">
  <label for="range-2">31 - 60</label><br>  
  <input type="radio" id="age2-3" name="age2" value="100">
  <label for="range-3">61 - 100</label>
  <br><br>
 </div>
 
  <button type="button" class="add-btn" onclick="addAnotherOne()">+ ADD ANOTHER DATA</button>

​

Answer 2

如何使用JavaScript增加输入字段的名称值？

1. 获取要增加的值。目前，您有几个具有相同it的项，这使得它变得更加困难。如果您修复了这个问题，您可以很容易地访问该值，例如，从document.getElementById("uniqueID").value
2. Extract编号到int并转换为int。“parseInt(str.replace('RANGE_',''));
3. Add”"RANGE_"+(i+1)

1，并与"RANGE_“连接