如何从选定的选项中获取文本、名称属性和其他非标准属性？

Question

I have a select html-tag with several options .

Here is an example:

<select id="mySelect1" size="4" style="width:100px;">
    <option value="AUS" 
            name="Australia" 
            city="Canberra"
            >Australia</option>

    <option selected value="CAN" 
                     name="North America" 
                     city="Ottawa"
                     >Canada</option>

    <option value="GRC" 
            name="Europe" 
            city="Athens"
            >Greece</option>

    <option value="JPN" 
            name="Asia" 
            city="Tokyo"
            >Japan</option>
</select>

I know how to alert the value of the selected option:

alert(mySelect1.options[mySelect1.options.selectedIndex].value);

But when I try to alert the city or even the name of the selected option I fail, with almost the same code:

alert(mySelect1.options[mySelect1.options.selectedIndex].city);
alert(mySelect1.options[mySelect1.options.selectedIndex].name);

Is it possible to get any attribute and the text from the selected option in pure javascript?

Answer 1

Sure, it is possible.

First of all, your code does not work with city and name attributes of the option tag because HTML option Tag has neither name , nor city attribute , they are not standard!

If you ever wish, you can use a standard label attribute instead of name , so the similar minimalist code would work:

//Get label attribute:
alert(mySelect1.options[mySelect1.options.selectedIndex].label);

But in any way, apart from name , you've got city . So you need to use attributes for getting such non-standard attributes. Therefore, here is the code that works with the selected option, based on your example:

 document.write('<br>'); //Get innerText: document.write(mySelect1.options[mySelect1.options.selectedIndex].innerText + '<br>'); //Get value attribute: document.write(mySelect1.options[mySelect1.options.selectedIndex].value + '<br>'); //Get name attribute: document.write(mySelect1.options[mySelect1.options.selectedIndex].attributes.name.value + '<br>'); //Get city attribute: document.write(mySelect1.options[mySelect1.options.selectedIndex].attributes.city.value + '<br>');

 <select id="mySelect1" size="4" style="width:100px;"> <option value="AUS" name="Australia" city="Canberra" >Australia</option> <option selected value="CAN" name="North America" city="Ottawa" >Canada</option> <option value="GRC" name="Europe" city="Athens" >Greece</option> <option value="JPN" name="Asia" city="Tokyo" >Japan</option> </select>

So this is how it works.

For you to understand more, all attributes can be retrieved from attributes . That means that you can (but of course do not need to! ) use attributes with standard attributes, like this:

alert(mySelect1.options[mySelect1.options.selectedIndex].attributes.value.value);
alert(mySelect1.options[mySelect1.options.selectedIndex].attributes.label.value);