Reputation: 43973
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
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
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
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>
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
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
}
Upvotes: 3
Reputation: 485
in jquery, you can just write:
$("#myname").find(':selected').attr('isred');
Upvotes: 33
Reputation: 11
you can
$(".myclass").val(function(){alert($("option",this).attr("isred"));})
Upvotes: -1
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
Reputation: 8784
Use something like this:
document.getElementById("x").onchange = function () {
console.log(this.options[this.selectedIndex].getAttribute("isred"));
};
Upvotes: 8