0

我有一个 JSON 对象，其中包含类别和相应的子类别。我有两个下拉列表（作为表格的一行），第一个下拉列表包含类别列表。选择特定类别时，第二个下拉列表将填充子-所选类别的类别。我已经做到了，并且工作正常。

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

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

我知道原因 - 我无法将 id 分配给动态创建的下拉列表，因此无法在它们之间建立任何关系。

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

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

1 回答 1

1

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

但是您正在创建具有相同 ID 的动态元素，这是错误的，HTML 为每个元素指定一个 ID。因此，您应该将您的 ID 更改为类，并为每个行元素设置一个特定的 ID。因为即使 HTML 已损坏，HTML 也能正常工作，所以我在代码中添加了一些检查以查看它是初始行还是动态创建的行，因此您可以知道要将事件附加到哪个选择框（具有相同的 ID）侦听器（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);        
    }   
});
于 2013-04-11T10:42:19.017 回答