如何从动态生成的表格中获取下拉菜单的选中选项值

问题根源 #

1. 动态生成的下拉框ID全局重复，所有行的<select>都用了同一个id="cars"，违反DOM规范，ID选择器无法正常定位元素
2. 取值写法错误：currColumn是表头内容的字符串，不是DOM节点，不能调用getElementById方法，且你查找的addressType和实际下拉框的IDcars不匹配
3. 原有遍历逻辑只处理了<input>元素的取值，没有覆盖<select>元素的场景

修正方案 #

你不需要依赖ID查找元素，直接在当前单元格（currData）范围内查询<select>元素即可，修改后的代码如下：

1. （可选）修正动态生成HTML的重复ID问题

如果后续需要单独定位某一行的下拉框，建议生成时加上行号后缀保证ID唯一：

$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='Letter"+i+"' type='text' placeholder='Letter' class='form-control input-md'  /> </td><td><input  name='Start"+i+"' type='text' placeholder='Start'  class='form-control input-md'></td><td><input  name='End"+i+"' type='text' placeholder='End'  class='form-control input-md'></td> <td>  <select name='cars' id='cars_"+i+"'><option value='All'>All</option><option value='Even'>Even</option><option value='Odd'>Odd</option></select></td>");

2. 修改遍历取值逻辑

在原有查询input的逻辑基础上增加select的判断：

// start from the second row as the first one only contains the table's headers
for (let i = 1; i < targetTableRows.length; i++) {
    var Inventorydict = {}
    // loop over the contents of each row
    for (let j = 0; j < targetTableRows[i].cells.length; j++) {
        // something we could use to identify a given item
        let currColumn = tableHeaders.cells[j].innerHTML;
        // the current <td> element
        let currData = targetTableRows[i].cells[j];
        // 查询当前单元格内的input和select元素
        let currDataInput = currData.querySelector('input');
        let currDataSelect = currData.querySelector('select');
        let cellValue = '';

        if (currDataInput) {
            cellValue = currDataInput.value;
        } else if (currDataSelect) {
            // 直接获取下拉框的选中值
            cellValue = currDataSelect.value;
        } else {
            cellValue = currData.innerHTML;
        }

        console.log(`${currColumn}: ${cellValue}`);
        Inventorydict[currColumn.replace(/\s/g, '')] = cellValue;
    }
}

修改后即可同时正常获取输入框和下拉框的取值。

内容的提问来源于stack exchange，提问作者e.iluf