当前位置: 代码迷 >> Java Web开发 >> 有个按钮,每次点击都添加1个新的select元素和2个input。如何写js当新增加的select改变时,其中一个input的值也改变
  详细解决方案

有个按钮,每次点击都添加1个新的select元素和2个input。如何写js当新增加的select改变时,其中一个input的值也改变

热度:10080   发布时间:2013-02-25 21:07:26.0
有个按钮,每次点击都添加1个新的select元素和2个input。怎么写js当新增加的select改变时,其中一个input的值也改变?
有个按钮,每次点击都添加1个新的select元素和2个input。怎么写js当新增加的select改变时,其中一个input的值也改变?

按钮的点击事件如下:

$("#btn_add_method").click(function () {
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'div_txt');
    newTextBoxDiv.after()(
  '<select id="comb_res_addr" style="width:100px;"    onchange="onchange_addr(this.value)">
    <option value="res_addr">地址</option>
    <option value="res_addr_domain">地址段</option>
</select>
<input type="text" style="width:100px;" id='txt_res_ip1' value="">
<input type="text" style="width:100px;" id='txt_res_ip2' value="">'
  );
     newTextBoxDiv.appendTo("#div_box");
})


如果5次点击后有5个select,和10个inupt,其中5个input的id是txt_res_ip2。怎么写js能让每次点击后生成的select改变值时,对应的txt_res_ip2也改变值。


比如:如果第3行的select改变值,那么怎么让第3行的txt_res_ip2也改变值?

------最佳解决方案--------------------------------------------------------
直接给onchange_addr(this)方法里面传当前的select元素对象
筛选出它同级的id为txt_res_ip2的元素
var input=$(this).siblings("input[id=txt_res_ip2]")//获得同级的id为txt_res_ip2的input元素
$(input).val($(this).val());//改变值
------其他解决方案--------------------------------------------------------
引用:
引用:
直接给onchange_addr(this)方法里面传当前的select元素对象
筛选出它同级的id为txt_res_ip2的元素
var input=$(this).siblings("input[id=txt_res_ip2]")//获得同级的id为txt_res_ip2的input元素
$(input).val($(this).val());/……

你的select元素不是每次都添加出来了吗,你的html脚本里就已经 
newTextBoxDiv.after()(   '<select id="comb_res_addr" style="width:100px;"    onchange="onchange_addr(this.value)"> 这里的onchange_addr不是直接写在这了吗只是不同的是传的不是this.value而是this '<select id="comb_res_addr" style="width:100px;"    onchange="onchange_addr(this)"> 
------其他解决方案--------------------------------------------------------
如果没新增一个select都要新增两个input
那么LZ这样写
<input type="text" style="width:100px;" id='txt_res_ip1' value="">
<input type="text" style="width:100px;" id='txt_res_ip2' value="">
并且还打算用id来操作input的话、是不行的!
一个select还行、两个select有四个input的时候、input的id就重复了!
如果select元素的每个value值都是唯一的、可以考虑用option的value来做input的id!!!
这样onchange="onchange_addr(this.value)" 就很好操作了!
------其他解决方案--------------------------------------------------------
引用:
如果没新增一个select都要新增两个input
那么LZ这样写
<input type="text" style="width:100px;" id='txt_res_ip1' value="">
<input type="text" style="width:100px;" id='txt_res_ip2' value="">
并且还打算用id来操作input……


这还是不行,每次点击“添加”都会新增一个select和2个inut,他们的id值是固定的。当某一个select改变时,怎么改变和这个select同时增加进来的那个input的值呢?
------其他解决方案--------------------------------------------------------
引用:
直接给onchange_addr(this)方法里面传当前的select元素对象
筛选出它同级的id为txt_res_ip2的元素
var input=$(this).siblings("input[id=txt_res_ip2]")//获得同级的id为txt_res_ip2的input元素
$(input).val($(this).val());//改变值
   ……


你的方法是正确的,还有个问题。怎么在页面刚加载的时候,把页面上id为comb_res_addr的select作为obj传给onchange方法呢?我写的如下,但是好像有问题:

$(document).ready(function(){
  onchange_addr($("#comb_res_port"));
  相关解决方案