javascript - 单击选项时添加带有选项值的输入

Question

<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>


<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" />  <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';

}

function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/>   <input  type="button" value="+" class="add" style=" width:9%;" />

</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option onclick="addRow(this.form);"value="0">Select</option>
     <option onclick="addRow(this.form);"value="8">text1</option>
     <option onclick="addRow(this.form);"value="5">text2</option>
     <option onclick="addRow(this.form);"value="4">text3</option>     
</select>

</form>
</div>

我希望当单击选项输入添加并将选项值替换为输入值时，但是当单击多个选项时它不会替换，我必须单击另一个选项然后单击它才能工作!

Answer 1

您将新创建的输入的值设置为 frm.add_ip.valueе，这是输入的值，而不是选择的值。

由于它是您已经使用的表单，因此您可以使用访问选择(及其值)

form.Ultra.value

它为您提供实际值 (0,8,5,4)，或者您可以通过 jquery 访问它

$("#Ultra").val()

这给了你同样的东西。

也就是说，您将生成具有相同 id ip 的所有其他文本框。由于您已经为段落标签指定了特定的 ID，因此您也应该对文本框使用确切的方法。

<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>


<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+$("#Ultra").val()+'" required placeholder="192.168.0.1:80" class="form-control wid2" />  <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';

}

function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/>   <input  type="button" value="+" class="add" style=" width:9%;" />

</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option onclick="addRow(this.form);"value="0">Select</option>
     <option onclick="addRow(this.form);"value="8">text1</option>
     <option onclick="addRow(this.form);"value="5">text2</option>
     <option onclick="addRow(this.form);"value="4">text3</option>     
</select>

</form>
</div>