要使用javascript动态添加的相关下拉列表

我有一个JSON对象，它包含类别和相应的子类别。我有两个下拉列表作为表的一行，第一个下拉列表包含类别列表。当选择特定类别时，第二个下拉列表将填充所选类别的子类别。 我已经做到了这一点，并且工作得很好

现在，我需要动态添加行。添加行功能也可以正常工作

但我无法在动态添加的行中建立下拉列表之间的关系

我知道原因——我无法为动态创建的下拉列表分配id，hense也无法在它们之间建立任何关系

请建议如何建立所需的关系

<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>  

---

问题是，当您输入一个动态创建的元素时，您还必须将事件附加到它，使用jquery您可以委托事件，但因为您在addRow函数上不使用它，所以我添加了eventListener

但是您正在创建具有相同ID的动态元素，这是错误的，HTML为每个元素指定一个ID。 所以您应该将ID更改为类，并为每个行元素指定一个特定的ID。 因为HTML即使被破坏也能工作，所以我在代码中添加了一点检查，看看它是初始行还是动态创建的行，这样您就可以知道事件监听器getElementById要附加到哪个具有相同ID的选择框中，以返回它找到的第一行。 所以这会起作用，但这是一个非常糟糕的做法

我只在混合中添加了一点jQuery，但您可以去掉它，只针对事件侦听器

这是其中之一

这是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);        
    }   
});

---

当您单击动态创建的行时，它应该有什么作为输入？不清楚所需的关系是什么…我希望动态创建的行有两个下拉列表-第一个是“类别”，第二个是“子类别”。现在，当我单击“添加行”按钮时，两个下拉列表被添加，但这两个下拉列表之间没有任何关系。i、 例如，当我在动态添加的第一个下拉列表中选择category1时，子类别不会在动态添加的第二个下拉列表中填充。是的，我现在明白了，您可以使用jQuery吗？jQuery对我来说不是一个选项，但有一些严格的限制。如果没有jQuery，这可以实现吗？是的，它可以，等等，我将向您展示一些代码。非常感谢…它真的帮助了我。出于curosity，我的类别和子类别存储在sqlite db中。我使用perl获取它，然后使用JSON模块对其进行编码。然后Javascript使用此对象呈现下拉列表。这是正确的方法吗？如果有更好的选择，请提出建议。再次感谢。那么您必须使用perl吗？PHP有自己的PDO，内置SQLite，如果您愿意，可以使用AJAX获取它。。。取决于你的项目真的。。。