How to get text, name attribute and other non-standard attributes from selected option?

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?

In addition to the answer below you can have a look at **querySelectorAll**, which might help you to get any attribute. One of the examples: https://stackoverflow.com/a/67766125/5410914 — ZolVas, May 30 '21 at 22:00

ZolVas · Accepted Answer · 2021-05-30T22:09:49.347

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

How to get text, name attribute and other non-standard attributes from selected option?

1 Answers1