CODEWITHSUNDEEP
javascripthtmlselect
omega
omega

Reputation: 43973

html - how to get custom attribute of option tag in dropdown?

If I have this code:

 <select onchange="alert('?');" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
 </select>

How can I get the value '-1' from the custom attribute isred ? I don't want to use the value property. And I dont want to target the option tag by a name or id.

I want something like onchange="alert(this.getselectedoptionID.getAttribute('isred'));"

Can anyone help?

Also I don't want to use jquery.

Upvotes: 46

Views: 126169

Answers (8)

bprdev
bprdev

Reputation: 1048

My answer is very similar to this one. But I still want to add it because it specifically shows how to get the data attribute.

HTML

<select id="mySelect">
  <option data-test="123" value="a">A</option>
  <option data-test="456" value="b">B</option>
</select>

Javascript

const select = document.querySelector('#mySelect');

select.addEventListener('change', function() {
  console.log(this.selectedOptions[0].dataset.test);
})

Upvotes: 0

Code Cooker
Code Cooker

Reputation: 939

//Pure Javascript solution, and elegant one check if you really want to leverage the power of javascript.

// Listening to a onchange event by ID attached with the select tag.
document.getElementById("name_your_id").onchange = function(event) {

//event.target.selectedOptions[0] have that option. as this is single selection by dropdown. this will always be 0th index :) 
let get_val = event.target.selectedOptions[0].getAttribute("isred");
console.log("Value from the Attribute: ", get_val)
}
 <select id="name_your_id" name="myname" class="myclass">
    <option isred="423423" value="hi">One</option>
    <option isred="-1" value="hi">Two</option>
 </select>

Upvotes: 5

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 67219

You need to figure out what the selectedIndex is, then getAttribute from that options[] Array.

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass"> 
    <option isred="-1" value="hi">click</option>
    <option isred="-5" value="hi">click</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jsFiddle DEMO

As a side note:

Don't use inline javascript in your HTML. You want to separate your business logic from your UI. Create a javascript event handlers instead to handle this. (jQuery / Angular / etc)

Upvotes: 86

walter
walter

Reputation: 41

Assuming we have a HTML markup as below:

<form id="frm_">
    <select name="Veh">
        <option value='-1' selected='selected'>Select</option>
        <option value='0' ren='x'>xxx</option>
        <option value='1' ren='y'>yyy</option>
    </select>
</form>

The attr "ren" can be accessed like this:

function getRep() {
    var ren = document.forms['frm_'].elements['Veh'].options[document.forms['frm_']
                 .elements['Veh'].selectedIndex].getAttribute('ren');
    console.log("Val of ren " + ren); //x or y
}

Demo

Upvotes: 3

Bernard
Bernard

Reputation: 485

in jquery, you can just write:

$("#myname").find(':selected').attr('isred');

Upvotes: 33

Saintush Kumar
Saintush Kumar

Reputation: 11

you can

$(".myclass").val(function(){alert($("option",this).attr("isred"));})

Upvotes: -1

GitaarLAB
GitaarLAB

Reputation: 14665

You use: .getAttribute('isred')

You want:

<select onchange="alert(this.options[this.selectedIndex].getAttribute('isred'));" name="myname" class="myclass">
    <option isred="-1" value="hi">click</option>
    <option isred="-1" value="ho">click</option>
</select>

Upvotes: 1

Anthony Mills
Anthony Mills

Reputation: 8784

Use something like this:

document.getElementById("x").onchange = function () {
    console.log(this.options[this.selectedIndex].getAttribute("isred"));
};

Upvotes: 8

Related Questions