Javascript 从多个选定下拉列表（动态下拉列表）的数据属性中获取值

我试图将所选下拉列表的数据属性放到输入框中，给定的代码对于页面中包含的单个下拉列表非常有效，它将数据属性输出到输入框中

但是，当我添加两个或更多下拉列表时，该值并不正确。我正在处理从数据库中检索的动态数据，因此下拉列表的数量可能会有所不同。如何编写动态的js代码

$（文档）.ready（函数（）{
$（'select.material price'）.change（函数（）{
var materialValue=$（'select.materialprice'）。查找（':selected'）。数据（'price'）；
$（'.material total'）.val（materialValue）；
});
});

材料A
材料B
材料C
材料A
材料B
材料C
使用
$（this）
jquery从激发的select数据中获取值，并使用
$next（）
将值分配给紧邻select的输入


$（文档）.ready（函数（）{
$（'select.material price'）.change（函数（）{
var materialValue=$（this）.find（'：selected'）.data（'price'）；
$（this）.next（'.material total'）.val（materialValue）；
});
});

材料A
材料B
材料C
材料A
材料B
材料C
Hi所以我使用这个库（）来获得下拉搜索，当我使用特定类激活下拉搜索时，您的代码不起作用。有什么原因吗？但是，当我删除“select2”类时，它工作得非常好。无法理解您所说的内容。你能和我共用一把小提琴吗？我正在试着用（）。但是当我试图通过为“select dropdown”库添加类来使用它时。您的代码由于某种原因停止工作。