动态添加和删除级联下拉列表行？答案

【问题标题】：Dynamically add and remove rows of cascading dropdown lists?动态添加和删除级联下拉列表行？
【发布时间】：2021-05-15 17:36:46
【问题描述】：

所以我正在尝试制作一个表单，用户可以在其中动态添加和删除包含级联下拉列表的行作为类选择器。

到目前为止，除了remove selected classes 函数之外，我已经能够使一切正常工作。

我尝试了几个不同的 deleteRow 函数，但似乎无法正常工作。

我最近的尝试是使用复选框输入，但我愿意接受任何其他解决方案。

谢谢

<!DOCTYPE html>
<html>
   <head>
        <title>Semesters Planned</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('#selectCategory').change(function() {getSelectedItem(this, null); });
        $('#button').click(function() 
            {addRow('dataTable');   });         
    var classes = {//can probably use external text files for these later on
        "Core": ["UNI101", "ENG101"],
        "Major": ["CSC101", "CSC180"],
        "Elective": ["ART101", "PSY101"]
        };
    var keys = Object.keys(classes);
    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 < classes[selectedCategory].length; i++) {
            sub_category_dropdown[sub_category_dropdown.length] = new Option(classes[selectedCategory][i], classes[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);

  };
  function deleteRow(tableID)
{
    for (var rowi= table.rows.length; rowi==0;) {
        var row= table.rows[rowi];
        var inputs= row.getElementsByTagName('chk');
        for (var inputi= inputs.length; inputi0;) {
            var input= inputs[inputi];

            if (input.type==='checkbox' && input.checked) {
                row.parentNode.remove(tableID);
                break;
}
}}}
  for (var keys in classes) {
    category_dropdown[category_dropdown.length] = new Option(keys, keys);
  }
});
</script>
   </head>

   <body>
    <INPUT type="button" value="Add Class" id="button" />
<INPUT type="button" value="Remove Selected Classes"/>
<form id="myForm">
  <TABLE id="dataTable">
    <TR>
      <TD>
        <select id="selectCategory">
          <option>Choose Class Type</option>
        </select>
      </TD>
      <TD>
        <select id="selectSubCategory">
          <option>Choose Class Type First</option>
        </select>
      </TD>
      <TD><INPUT type="checkbox" name="chk" id="input"/></TD>
    </TR>
    
  </TABLE>
</form>

   <a href = "builder.html"><input type = "Submit" value = "Submit"> </a>
   </body>
</html>

【问题讨论】：

标签： javascript html jquery forms frontend

【解决方案1】：

我的第一个建议是确保当您单击删除按钮时它正在执行某些操作 - 您已将一个事件侦听器附加到“添加类”按钮，但“删除选定的类”按钮看起来不像是在调用它deleteRows 函数。

然后，确保您在 deleteRows 函数中有对该表的引用。您正在向它传递一个表 ID，但 table 变量引用是在该函数的 scope 之外定义的。

然后，处理 for 循环和其中的逻辑。看起来您将 getElementsByTagName 误认为是 getElementsByName。您使用的是标签名称（输入）而不是名称属性（chk）。

希望这能有所帮助！

【讨论】：

感谢您的回复。对于您的第一个建议，您会建议我使用另一个事件侦听器还是 onclick 事件？
我只会做你为另一个按钮所做的事情，因为它使事情保持一致。然后我会在该函数和 for 循环中放置一些 console.log 语句，以便您可以在那里解决其他问题。只需逐行检查，确保代码按照您的想法执行。