如何使用 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 和 name 的唯一性并检查以下代码。将您的代码包装在您最后附加 html 的任何控件（我采用 div）中。

另外你没有为删除添加，如果你愿意，那么你可以对添加做同样的事情，只需选择索引并删除具有当前索引号的内容。

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. 获取要增加的值。目前，您有几个具有相同 ID 的项目，这使得它更加困难。如果您解决了这个问题，您可以轻松访问该值，例如document.getElementById("uniqueID").value
2. 从中提取数字并转换为 int。 “RANGE_2”parseInt(str.replace('RANGE_',''));
3. 添加 1 并再次与“RANGE_”连接"RANGE_"+(i+1)