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

Question

How do I get the name value from the following?

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

I tried this (adding .name to the end. .value works, .name doesn't)

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

thanks

Answer 1

Use getAttribute because name is not a valid attribute for option (so there is no name property for the option element which gets updated when you set its name attribute), hence you cannot get it from the name property (by accessing elm.name ).

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

Better way would be to make it a data-* attribute and access it using dataset (Not supported in older browser versions).

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

and

this.options[this.selectedIndex].dataset.name; //or this.options[this.selectedIndex].getAttribute('data-name')