18910140161

JavaScript-如何从动态表获取下拉选择选项-堆栈溢出

顺晟科技

2022-10-18 13:01:07

17

我正在尝试从动态创建的表列中提取选定的选项。下面的代码可以提取输入值,但不能提取下拉值。

动态生成HTML

          $('#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'><option value='All'>All</option><option value='Even'>Even</option><option value='Odd'>Odd</option></select></td>");

JavaScript代码

    // 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];
            // the input field in the row
            let currDataInput = currData.querySelector('input');
 
            // is the current <td> element containing an input field? print its value.
            // Otherwise, print whatever is insside
            currDataInput ? console.log(`${currColumn}: ${currDataInput.value}`) 
              : console.log(`${currColumn}: ${currData.document.getElementById("addressType")}`); 
            if (currDataInput) {

                Inventorydict[currColumn.replace(/\s/g, '')] = currDataInput.value;
  
            } else {
                Inventorydict[currColumn.replace(/\s/g, '')] = currData.innerHTML;
            }
             
        }

我用它来获取输入值。

    let currDataInput = currData.querySelector('input');

我试着用这个来获得选定的选项。

            let addresstype = currColumn.getElementById("addressType")

但它不起作用。如何获得下拉选择选项?


顺晟科技:

CurrColumn在代码的这一点上被赋予了一个值:

let currColumn = tableHeaders.cells[j].innerHTML;

innerHTML属性返回一个字符串,这就是不能对其使用QuerySelector的原因。

首先,如果您想要获取select每行一次的值,您应该将该部分移到内部循环之外,该循环遍历该行的每个单元格。

然后,您需要获取trHTML元素的引用。这应该是targetTableRows[i]

您可以通过在此元素上使用QuerySelector来获取select元素:

for (let i = 1; i < targetTableRows.length; i++) {
    var Inventorydict ={}
    
    // ...
    
    let select = targetTableRows[i].querySelector("select");
    let selectValue = select.value; // This will map to the "value" property of the selected option
}

但是,请记住,您实际上应该根据元素的类或输入名称来选择元素,而不是根据元素的类型。此外,不应将相同的ID分配给页面的多个元素。这将帮助您避免难以排除的错误。

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航