Question

我正在尝试动态检索html表中的下拉值。这是我的HTML

<tr>
 <td>ITMF-502</td>
 <td>PUMA</td>
 <td>1</td>
 <td>0</td>
 <td>HALF FRAME/ METAL/ NB/ LOW PRICE</td><td>KOTTAWA</td>
 <td>
  <select name="loc" id="location0" class="form-control">
   <option value="BR000002">KOTTAWA</option>
   <option value="BR000007">NEGOMBO</option>
  </select>
 </td>
</tr>

这是我的java脚本

var table = document.getElementById('Items');
var tableRowCount = $("#Items > tbody > tr").length;
for (var i = 1; i <= tableRowCount; i++) {
    var obj = {
        itemCode: table.rows.item(i).cells[0].innerText,
        currentLocation: table.rows.item(i).cells[5].innerText,
        newLocation: table.rows.item(i).cells[6].find("select").val()
    };
    items.push(obj);
}

但它不会发生。任何人都可以告诉我如何才能获得这个价值。我需要访问值，而不是文本。

Answer 1

尝试以下代码

HTML

<tr>
 <td>ITMF-502</td>
 <td>PUMA</td>
 <td>1</td>
 <td>0</td>
 <td>HALF FRAME/ METAL/ NB/ LOW PRICE</td><td>KOTTAWA</td>
 <td>
  <select name="loc" id="location0" class="form-control">
   <option value="BR000002">KOTTAWA</option>
   <option value="BR000007">NEGOMBO</option>
  </select>
 </td>
</tr>

JavaScript的：

var tableRowCount = document.getElementById('location0').length;;
for (var i = 0; i < tableRowCount; i++) {
    alert(document.getElementById('location0')[i].value);
}

Answer 2

我认为基本问题是你的FOR忽略第一行（索引为0的那一行）。您还要添加到不存在的项数组...

这是改进的jQuery版本：

var items = [],
    table = $(document.getElementById('Items')),
    tableRows = table.find('tr'),
    obj,
    tableRow;

for (var i = 0; i < tableRows.length; i++) {
    tableRow = tableRows.eq(i);

    obj = {
        itemCode: tableRow.find('td').first().text(),
        currentLocation: tableRow.find('td').eq(5).text(),
        newLocation: tableRow.find("select").val()
    };
    items.push(obj);
}

console.log(items);

如何从html表格单元格中的下拉列表获取值

2 个答案: