select onchange get option name attribute value

Question

I have a html page:

 function getName(val) { alert(val.value); alert(val.getAttribute('name')); } 

 <select onchange="getName(this)"> <option name="1" value="data1">Data 1</option> <option name="2" value="data2">Data 2</option> <option name="3" value="data3">Data 3</option> </select> 

I want that option name and value data. It returns value data as expected ,but it return name data as null .

What should I do?

Any help is appreciated. Thank You

Answer 1

Here in the function getName the argument select refers to the select element, but not the selected option . Use selectedIndex to get the selected option then use getAttribute

 function getName(select) { // You can get the value like you did var value = select.value; console.log(value); // And here we get the name var selectedOption = select.options[select.selectedIndex]; var name = selectedOption.getAttribute('name'); console.log(name); } 

 <select onchange="getName(this)"> <option name="1" value="data1">Data 1</option> <option name="2" value="data2">Data 2</option> <option name="3" value="data3">Data 3</option> </select> 

You could also do the following (which is more clear)

function getName(select) {
  var selectedOption = select.options[select.selectedIndex];
  var value = selectedOption.getAttribute('value');
  var name = selectedOption.getAttribute('name');
  console.log(value, name);
}

Answer 2

 function getName() { alert(event.target.value); alert(event.target.selectedOptions[0].getAttribute('name')); } 

  <select onchange="getName()"> <option name="1" value="data1">Data 1</option> <option name="2" value="data2">Data 2</option> <option name="3" value="data3">Data 3</option> </select> 

Answer 3

I would also like to suggest a different answer that, I think, highlights better web programming practices.

In my opinion, you shouldn't use something like onchange="getName(**this**)" in your HTML. You should attach the function to the select element via Javascript.

For demonstration purpose, we will add an id to our select element so we can find it in the DOM quickly.

<select id="mySelect">
  <option name="1" value="data1">Data 1</option>
  <option name="2" value="data2">Data 2</option>
  <option name="3" value="data3">Data 3</option>
</select>

Next we write our Javascript

// When the page is loaded...
document.addEventListener("DOMContentLoaded", function(event) {
  // Find your select...
  var mySelect = document.getElementById("mySelect");

  // Attach the function to the "onChange" event.
  mySelect.addEventListener("change", function(event) {
    // Retrieve the select element from the event.
    var select = event.target;
    var selectedOption = select.options[select.selectedIndex];
    var value = selectedOption.getAttribute('value');
    var name = selectedOption.getAttribute('name');
    console.log(value, name);
  });
});

It is a more structured and clean way of solving the problem.

Hope you learned something new!