Question

我有一个带有表的Web表单，用户可以向其添加其他行。表的第一行包含依赖的下拉列表。使用引用文件中的json数据填充下拉列表。我正在使用的代码如下：

//the add row function
$(function(){
var newgroup = $('<tr>').addClass('rec-rows');
$('#addRow').click(function(e){
    e.preventDefault();
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details');     }); 

});

//onChange function
$(".rec-rows #section").live('change',function(){


var sSec =$(this).parent().find('#section').val();  

$("#divParts").hide();
$("#divDesc").hide(); 
$("#divGroup").hide(); 
if(sSec=="select") {
$("#divCategory").hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"
}

理论上，添加了一个新行，我粘贴的onChange代码将适用于每个额外的行。但是，结果并非如此。相反，当添加行并且用户在新行上进行选择时，值将在第一行中更新。表的第一部分如下所示：

<td width="" align="left"> 
<div>
<select id="section" name="section" style="margin-top:15px;"> 
<option value="select">Select Area</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
</select> 
</div> 
</td>

我感谢任何帮助以使代码按预期工作 - 这将是一个简单的添加行，其中下拉选项仅在找到它们的行上更新。谢谢。

Answer 1

您可以在此处查看我的答案，了解如何动态地将行添加到表的开头：

How can I dynamically generate a table row with it's tds?

这可能对你有帮助。

或者我也看到了问题。

更改$（“＃section”）。更改（

为：

$("#section").live('change',...

这可能是新下拉列表不起作用的原因

Answer 2

得到了解决方案！我被建议在以下背景中声明父母：

$(".section").change( function () {
var sSec =$(this).val();  
context = $(this).parents("tr");
if(sSec=="select") {
$("#divCategory", context).hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"

现在，对于每个“添加行”单击，添加一行，并在用户选择该行且仅该行时更改下拉列表。

jquery在下拉列表中添加带有json数据的表行

2 个答案: