如何使用javascript获取元素的自定义属性值

How do I get the custom attribute value of an element using javascript

本文关键字：自定义属性 元素 获取 何使用 javascript      更新时间：2023-09-26

如何从以下内容中获取名称值？

<select id="product">
    <option name="name1" value="1">one</option>
    <option name="name2" value="2">two</option>
</select>

我试过这个（在末尾添加.name…value有效，.name无效）

var select = document.getElementById("product");
select.onchange = function(){
    var selectedString = select.options[select.selectedIndex].name;
    alert(selectedString);
}

感谢

使用getAttribute，因为name不是选项的有效属性（因此选项元素没有name属性，在设置其name属性时会更新），因此无法从name属性（通过访问elm.name）获得它。

var selectedString = this.options[this.selectedIndex].getAttribute('name');

更好的方法是使其成为data-*属性，并使用数据集访问它（旧版本的浏览器不支持）。

<select name="model" id="model">
    <option data-name="name1" value="1">one</option>
    <option data-name="name2" value="2">two</option>
</select>

和

this.options[this.selectedIndex].dataset.name; //or this.options[this.selectedIndex].getAttribute('data-name')
相关文章：