CODEWITHSUNDEEP
javascriptdom
Pradip Dhakal
Pradip Dhakal

Reputation: 1962

select onchange get option name attribute value

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

Upvotes: 1

Views: 7209

Answers (3)

Bird
Bird

Reputation: 580

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!

Upvotes: 2

brk
brk

Reputation: 50291

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

Upvotes: 7

Charles Assuncao
Charles Assuncao

Reputation: 568

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>

Upvotes: 1

Related Questions