JQuery добавить строку таблицы с данными JSON в выпадающих

Question

У меня есть веб-форма с таблицей, в которую пользователь может добавить дополнительные строки. Первая строка таблицы состоит из зависимых раскрывающихся списков. В раскрывающихся списках содержатся данные 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

Получил решение!Мне посоветовали объявить родителя, например, в следующем контексте:

$(".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>"

Теперь для каждого клика «Добавить строку» добавляется строка, а выпадающие списки меняются при выборе пользователя для этой строки и только для этого.строки.

Answer 2

Здесь вы можете посмотреть мой ответ о том, как динамически добавить строку в начало таблицы:

Как я могу динамически сгенерировать строку таблицы с ее tds?

Это может помочь вам здесь.

или я тоже вижу проблему.

change $ ("# section"). Change (

до:

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

возможно, поэтому новые выпадающие списки не работают