2动态创建选择框使用jquery

-1

我只是想创建一个2选择框，如果用户在第一个选择框中选择一个选项，第二个选择框也选择该选项值或让我们说2选择框必须选择1相同指数值2动态创建选择框使用jquery

选择框1选择索引值2，然后选择框2也选择索引值2的onChange反之亦然

这里是我的代码，但只有2条选择框第一行是好的，如果我创建新行，无效

jQuery：

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVDesc\\[\\]").val(code); 

}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).attr('value'); 
    $(this).parent().parent().find("#fCVCode\\[\\]").val(code); 

});

形式

<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td>

希望你能帮助我。

来源

2010-11-17 Jhay

id属性必须是唯一的，所以第一次只使用名称（和删除那些无效的重复的ID），然后使用.delegate()这样的：

$("#tableId").delegate("select[name='fCVCode[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVDesc[]").val(code); 
}).delegate("select[name='fCVDesc[]']", "change", function() { 
    var code = $(this).val(); 
    $(this).closest('tr').find("select[name=fCVCode[]").val(code); 
});

当你做一个选择喜欢$("#fCVDesc\\[\\]")找到的元素该选择匹配（当然，在第一匹配它，因为它是一个#id selector），并结合那些，没有任何在将来创建... .delegate()会听冒泡的<table>事件新行的工作为好。

来源

2010-11-17 02:58:35

我不知道如何修改代码，你已经回答了我现在的表结构

这工作，但不知道如何最大限度地减少它

$("#fCVCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fCVDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 

$("#fCode\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
}); 
$("#fDesc\\[\\]").change(function() { 
    var code = $(this).val(); 
    $(this).parent().parent().find("select").val(code); 
});

我现在的表结构的东西去像这样

<table id="fAddCVDetails"> 
<tr> 
<th>Headers</th> 
</tr> 
<tr class="clone"> 
<td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVCode[]" id="fCVCode[]">'; 
     $s = rand(1,99); 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Code '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
    <td style="text-align: center; padding: 5px;"> 
    <select style="text-transform: uppercase; width: 100%;" name="fCVDesc[]" id="fCVDesc[]">'; 
     for($i = 0; $i <= $s; $i++) { 
     $display .= '<option value="'.$i.'">Desc '.rand(1,300).'</option>'; 
     } 
    $display .= '</select> 
    </td> 
</tr> 
</table>

另一个问题是，此代码是否真的找到具有该给定名称属性的select元素？

find("select[name='fCVCode\\[\\]']");

怎么我试过这个代码从textarea的到其他输入文本类型元素的值和我

$("i m g[name=fCVNoteInsert\\[\\]]").click(function() { 
$(this).parent().parent().find("div").fadeOut(200); 
value = $(this).parent().parent().parent().find("textarea").val(); 
$(this).parent().parent().parent().find("INPUT[name='fCVLeadTime\\[\\]']").val(value); 
});

和形式没有工作是（注：下面的表结构有5个输入，所以如果我把查找（“输入”）所有输入将具有相同的值。如果我把find（“＃fCVLeadTime”）只有第一行输入与id fCVLeadTime更改它的值这个问题是一样的作为我第一次发布的问题）。

<table id="fAddCVDetails"> <tr> <th>Headers</th> </tr> <tr> <td style="text-align: center; padding: 5px 10px 5px 5px;"><span><input type="text" id="fCVLeadTime[]" name="fCVLeadTime[]" style="width: 99%;" value="" /></span></td> 
    <div id="noteAttach[]" name="noteAttach[]" class="attachment b-all ds"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteInsert[]" name="fCVNoteInsert[]" style="cursor: pointer;" title="Insert Note"> 
     <span style="float: right;"> 
     <i m g s rc="imageicon" border="0" id="fCVNoteClose[]" name="fCVNoteClose[]" style="cursor: pointer;" title="Close Window"> 
     </span> 
     <div style="padding: 5px;"></div> 
     <textarea type="file" id="note[]" name="note[]" rows="5" cols="30"></textarea> 
    </div> 
     <i m g s rc="imageicon" border="0" name="fCVNotes[]" style="cursor: pointer;" title="'.PR_FORM_DOC_TTIP_UPLOAD_NOTE.'"> 
    </td> </tr> </table>

抱歉，我无法发布图片，因此我在图片和源代码的字母之间添加空格

来源

2010-11-22 01:59:20 Jhay

2动态创建选择框使用jquery

回答

相关问题