点击选项时添加选项值

时间:2015-12-16 10:31:50

标签: javascript jquery html css



<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>
&#13;
<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>
&#13;
&#13;
&#13;

我想要点击选项输入添加和选项值替换输入值但是当点击多个选项时它不会替换,我必须点击另一个选项然后点击它才能工作!

3 个答案:

答案 0 :(得分:0)

您正在将新创建的输入的值设置为frm.add_ip.valuе,这是输入的值,而不是选择。

由于它已经在您已使用的表单中,因此您可以使用

访问select(及其值)
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>

答案 1 :(得分:0)

删除addRowrun方法并添加此事件处理程序。您不需要单独处理点击选项,选择onchange就足够了。您还没有使用选项的值。

$( "#Ultra" ).change( function(){

    $( "#ip" ).val( $( this ).val() );
    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>';
    $( '#itemRows' ).append(row);

} );

答案 2 :(得分:0)

function run() {
    document.getElementById("ip").value = document.getElementById("Ultra").value;
}

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 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>

有些不对劲!