Javascript 如何在表中逐行从下拉列表中读取值

我正在编写一个发票程序。我想逐行计算价格。我有一个包含行和列的表。单行由6列组成：“产品”、“说明”、“单位成本”、“数量”、“增值税%”和“总价”。可以从下拉列表中的4个选项中选择VAT

如何逐行读取下拉列表中的选定值

我的HTML如下所示：

<table id="items">
... ... 
... ...
<td><form action="dropdown">
    <select id="dropdown-vat">
        <option value="0">0%</option>
        <option value="10">10%</option>
        <option value="14">14%</option>
        <option value="24" selected>24%</option>
    </select>
</form></td>
... ...
... ...
</table>

该函数在第一行正常工作。 价格计算为“成本”*“数量”*“1+所选增值税” 例如10*1*1.20=12此处增值税为20%，因此1+0.2=1.2

如果用户添加第二行，则会出现问题。 然后计算器使用第一行的vat

如果第一行是10*1*1.2=12， 第二行是这样的：10*1*1.0=12。程序使用的不是0%（1.0），而是20%（1.2，从第一行开始）

编辑：

---

当用户更改成本（模糊）、数量（模糊）或增值税（单击）值时，将调用函数update_price（）

您可以只使用select元素的值

var e=document.getElementById（“下拉增值税”）；
e、 onchange=函数（）{
//e…此或事件的值。目标
console.log（this.value）；
日志（event.target.value）；
}

0%
10%
14%
24%

以下是我最近如何解决一个类似的ish问题，以及您为什么看到您所看到的

您可以从第一行获得数字，因为JS（因此jQuery）只能有唯一的“id”，所以第二行（具有相同的id）永远不会被读取

要解决这个问题，可以使用一个“组合”的东西——也就是说，将一个类用于一个公共侦听器，然后获取一个“更改”函数的信息

<select id="dropdown-vat" class="vat">
    <option>..... as you have them </option>
</select>

可能有更直接的方法来实现这一点，尽管这是我所需要的

这里的要点是id必须是唯一的，因此您也可以为每一行创建一个唯一的id，然后处理更改（类似于我所展示的）。如果您需要该行的id：

    var theIdOfTheSelectedLine = selected.id;

---

完全回答这个问题可能还有很多，不过这应该可以帮助您解决主要问题（元素上的非唯一ID）。

该函数如何调用？1）使用模糊函数时成本或数量会失去焦点2）或者当我从下拉列表中选择增值税->单击函数时，这与OP在问题中的功能类似。在原始代码中没有清楚显示的（但在问题中询问的）是“第二行”——即表格中有一个下拉列表的新行——并且能够读取新的“行”选择。所以，答案有点复杂（我在最初几次阅读问题时也忽略了这一点……）啊，是的，你是对的……但你仍然忽略了如何获取下拉列表及其值的要点。OnChange函数仅适用于第一行。如果我添加一个新行并尝试从第二行读取vat值，什么都不会发生。这是因为您的问题不清楚，我认为表中只有一个vat下拉列表。ID必须是唯一的，所以应该改用类（正如CFP支持人员所提到的）。编辑了我的答案…做了一些假设，因为您的示例代码不完整。阅读抱歉，我不理解您的评论-如果我的答案（或其他答案）是正确的，请标记它-如果您仍然需要帮助，请编辑您的问题（如果您愿意，您可以添加到底部），我或其他人可以帮您。注释对于编写代码来说并不是很好，如果您将代码和问题放在问题中，那么帮助就简单多了。

$（'.vat'）[1]

将获得与该选择器匹配的第一个元素，因此仍将获得第一个下拉列表！然后你可能会在函数中使用

这个
，谢谢@yezzz-我最初的回答更为循序渐进，并将[1]放进去，以显示OP正在进行的操作-尽管它确实错过了“第二行”点。。。。我修改了我的答案。
$(".vat").change(function() {
    var selected = this.selectedOptions[0]);
    // now you can get its value, classes, whatever
    console.log("value of selected is ", selected.val());
});

    var theIdOfTheSelectedLine = selected.id;