Зависимые выпадающие списки, которые нужно добавить динамически с помощью javascript

Question

У меня есть объект JSON, который содержит категории и соответствующие подкатегории. У меня есть два выпадающих списка (как строка таблицы), в первом выпадающем списке содержится список категорий. Когда определенная категория выбранный, второй раскрывающийся список заполняется суб-категориями выбранной категории. Я сделал это и отлично работает.

Теперь у меня есть требование динамически добавлять строки. Кроме того, функция добавления строки также работает нормально.

Но я не могу установить связь между выпадающими списками динамически добавленных строк.

Я знаю причину - я не могу назначить идентификатор динамически созданным выпадающим спискам, и хенс не может установить никаких отношений между ними.

Просьба предложить установить необходимые отношения.

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 
<form id="myForm"> 
<TABLE id="dataTable" > 
<TR><TD> 
<select id="selectCategory" onchange="GetSelectedItem()"> 
<option>Choose a category</option> 
</select> 
</TD> 
<TD> 
<select id="selectSubCategory" > 
<option>Choose a sub-category</option> 
</select> 
</TD></TR> 
</TABLE> 
</form> 

Сценарий:

<script><!-- 
var jsonObj={"category1":["subcat 1"],"category2":["subcat 2.1","subcat 2.2"],"category3":["subcat 3.1","subcat 3.2","subcat 3.3"]}; 
var keys= Object.keys(jsonObj); 
    var category_dropdown = document.getElementById("selectCategory"); 
for (var keys in jsonObj) {    
    category_dropdown[category_dropdown.length] = new Option(keys,keys);   
    } 
function GetSelectedItem()  { 
      var e = document.getElementById("selectCategory"); 
      var selectedCategory = e.options[e.selectedIndex].value; 

      var sub_category_dropdown = document.getElementById("selectSubCategory"); 
      document.getElementById("selectSubCategory").options.length=0; //clearing previous values of the drop-down list 
      for(var i=0;i<jsonObj[selectedCategory].length;i++)    { 
       sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i],jsonObj[selectedCategory][i]);  
      } 
    } 
function addRow(tableID) 
    { 

     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      newcell.childNodes[0].selectedIndex = 0; 

     } 
    } 
//--></script> 

Answer 1

Проблема заключается в том, что при вводе динамически созданный элемент вы должны прикрепить события к нему, а также, с JQuery вы можете делегировать события, а потому, что вы не» t использовать его так на функции addRow, я добавил eventListener.

Но Вы создаете динамические элементы с одинаковым идентификатором, это неверно, HTML указывает один идентификатор на элемент. Таким образом, вы должны изменить свои идентификаторы в классе и иметь определенный идентификатор для каждого элемента строки. Поскольку HTML работает, даже если он сломан, я добавил небольшую проверку кода, чтобы узнать, является ли это начальной или динамически созданной, поэтому вы можете знать, к какому из полей выбора (с тем же идентификатором) присоединить прослушиватель событий (getElementById возвращает первое, что находит). Так что это сработает, но это действительно плохая практика.

Я добавил только немного jQuery в микс, но вы можете взять его, только для слушателей событий.

Это jsfiddle этого.

http://jsfiddle.net/C2xsj/5/

и вот HTML

<INPUT type="button" value="Add Row" id="button"/> 
<form id="myForm"> 
<TABLE id="dataTable" > 
<TR><TD> 
<select id="selectCategory"> 
<option>Choose a category</option> 
</select> 
</TD> 
<TD> 
<select id="selectSubCategory" > 
<option>Choose a sub-category</option> 
</select> 
</TD></TR> 
</TABLE> 
</form> 

и код

$(function() { 
    $('#selectCategory').change(function() { 
     getSelectedItem(this, null); 
    }); 

    $('#button').click(function() { 
     addRow('dataTable'); 
    }); 

    var jsonObj = {"category1":["subcat 1"],"category2":["subcat 2.1","subcat 2.2"],"category3":["subcat 3.1","subcat 3.2","subcat 3.3"]}; 
var keys = Object.keys(jsonObj); 
var category_dropdown = document.getElementById("selectCategory"); 

var getSelectedItem = function(element, row) { 
    var e = element; 
    var selectedCategory = e.options[e.selectedIndex].value; 
    var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("selectSubCategory")); 
    sub_category_dropdown.options.length=0; 
    for (var i=0;i<jsonObj[selectedCategory].length;i++) { 
     sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i],jsonObj[selectedCategory][i]); 
    } 
}; 

var addRow = function(tableID) { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = table.rows[0].cells.length; 

     for (var i = 0; i<colCount; i++) { 
      var newcell = row.insertCell(i); 
      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      newcell.childNodes[0].selectedIndex = 0; 
    } 
    var selects = row.getElementsByTagName("select"); 
    selects[0].addEventListener('change', function() { getSelectedItem(this, row) }, false); 
}; 

    for (var keys in jsonObj) {    
     category_dropdown[category_dropdown.length] = new Option(keys,keys);   
    } 
});