Can someone help what's the javascript equivalent of below jquery line.
$("#abc option[value='1']").text();
abc is the id of selectbox
Add a comment
|
5 Answers
var options = document.getElementById("abc").options;
for (var i = 0, j = options.length; i < j; i++) {
if (options[i].value == "1") {
alert(options[i].text);
}
}
The value and text attributes are available on the HTMLOptionElement per DOM Level 2.
(demo)
UPDATE
Updated demo with combined text, cf. comments:
var options = document.getElementById("abc").options,
text = "";
for (var i = 0, j = options.length; i < j; i++) {
if (options[i].value == "1") {
text += options[i].text;
}
}
3 Comments
jensgram
You can throw in a
break statement below the alert() in order to stop to loop, cf. @Guffa's answer. But do note @Felix Kling's comment (relevant if there are more than one option with value="1".
Felix Kling
Which is not correct (the
break). Btw. this only works if #abc is the select element. I mean, the whole thing works of your assumptions are correct, but it is not 100% equivalent to the selector (but maybe I'm too nitpicky ;))jensgram
@Felix Kling, no I noticed your comment which made me realize the possible mistake. Will update demo.
This would be 100% equivalent to the selector:
var options = document.getElementById('abc').getElementsByTagName('option'),
text = "";
for(var i = 0, l = options.length; i < l; i++) {
var option = options[i];
if(option.value === '1') {
text += option.text;
}
}
Or if querySelectorAll is available:
var options = document.querySelectorAll('#abc option[value="1"]'),
text = "";
for(var i = 0, l = options.length; i < l; i++) {
text += options[i].text;
}
That said, you can make improvements depending on the HTML structure (e.g. if #abc is the select element etc).
Comments
In modern browsers it can be:
var option = document.querySelector('#abc option[value="1"]').textContent
3 Comments
Felix Kling
If you want to be 100% correct, you'd have to use
querySelectorAll. And textContent does not work in IE afaik.
anton_byrna
Old IE have no querySelector and I wrote modern browsers.
Felix Kling
Ah yes, IE9 has
textContent. Nice :)The statement doesn't make sense. It gets the text from an option, and then just throws it away. I assume that you want to do something with the text, like assigning it to a variable.
// A variable for the result
var text = null;
// Get the options from the select element
var options = document.getElementById('abc').options;
// Find the option with the value "1"
for (var i = 0; i < options.length; i++) {
if (options[i].value == '1') {
// Get the text from the option
text = options[i].text;
// Exit from the loop
break;
}
}
Note: The original code would get the text from all options with the specified value, but this code only gets the text from the first option found. Having more than one option with the same value is pretty useless, so that feature of the original code is most likely unintended.
3 Comments
Felix Kling
The
break is wrong. .text() gets the combined text content of all selected elements.
Guffa
@Felix Kling: That depends on whether that is the intention of the original code. Having more than one option with the same value is pretty useless anyway. I'll add a comment so that its clear what the code does.
Felix Kling
Yeah I realized that it depends on what assumptions you make. It is very likely that your code is exactly what the OP intended...
This Will Work.
document.querySelector(".producer option[value='1']").text;
