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

Question

如何从以下获取名称值？

<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);
}

谢谢

Answer 1

使用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')