Javascript 如何正确更改getElementByClassName上的getElementById？

请帮助了解如何正确更改一个现有功能：

var o=document.getElementById('input-option77');
var mon = o.options[o.selectedIndex].getAttribute('price_value');
var nmon = Number(mon); 

使用getElementByClassName

我试着这样做，但答案是：

var e = document.getElementsByClassName('test');
var nmon = Number(e[0].options[e[0].selectedIndex].price_value);

我的示例表格：

<select name="test-name" id="input-option77" class="main-form test">
<option value="test1" price_value="0">Select1</option>
<option value="test2" price_value="200">Select2</option>
<option value="test3" price_value="300">Select3</option>
</select>

选择1
选择2
选择3

---

谢谢大家!

GetElementsByCassName返回类似HTMLCollection的数组，因此您只需要访问查询中的第一个元素

var e = document.getElementsByClassName('test')[0];

---

您需要从

getElementById

更改为

getElementsByClassName

的唯一代码是将[0]添加到

getElementsByClassName

：

var o=document.getElementsByClassName('test')[0];

getElementsByClassName

返回一个数组，并且假设只有一个数组，您只需要该数组中的第一个条目

将

.getAttribute

放回原处，可以得到以下代码：

var e = document.getElementsByClassName('test')[0]; 
var emon = Number(e.options[e.selectedIndex].getAttribute('price_value'));

---

工作小提琴：

price\u value

不是有效的属性，当然也不是属性。您可以通过

getAttribute（'price_value'）

获得它，但您应该使用数据属性，正如@adeneo所说，您需要更改的唯一代码是将[0]添加到getElementsByClassName:

var o=document.getElementsByClassName（'test'）[0]@adeneo-谢谢你的回复。我检查您的解决方案-但我有错误Uncaught TypeError:无法读取的属性“undefined”undefined@freedomn-谢谢你的回复。我试着听你说，但我有错误。请ypu检查一下我的提琴：你确定你没有别的东西吗？与具有class
test的其他元素一样