How do I access the "displayed" text of a select box option from the DOM?

Question

Given the following HTML:

<select name="my_dropdown" id="my_dropdown">
<option value="1">displayed text 1</option>
</select>

How do I grab the string "displayed text 1" using Javascript/the DOM?

Answer 1

The displayed text is a child node of the option node. You can use:

myOptionNode.childNodes[0];

to access it, assuming the text node is the only thing inside the option (and not other tags).

EDIT: Oh yeah, as others mentioned, I completely forgot about:

myOptionNode.text;

Answer 2

var sel = document.getElementById("my_dropdown");

//get the selected option
var selectedText = sel.options[sel.selectedIndex].text;

//or get the first option
var optionText = sel.options[0].text;

//or get the option with value="1"
for(var i=0; i<sel.options.length; i++){
    if(sel.options[i].value == "1"){
        var valueIsOneText = sel.options[i].text;
    }
}

Answer 3

var mySelect = document.forms["my_form"].my_dropdown;
// or if you select has a id
var mySelect = document.getElementById("my_dropdown");
var text = mySelect.options[mySelect.selectedIndex].text;

Answer 4

If you were using Prototype, you could get at it like this:

$$('#my_dropdown option[value=1]').each( function(elem){
                alert(elem.text);
            });

The above is using a CSS selector that says find all option tags with value="1" that are inside the element that has id="my_dropdown".

Answer 5

Assuming you modified your code a bit to have an id / class on the and were using jQuery you could have something like the following. It will pop up an alert for each option with the text of the option. You probably won't want to alert for all the text, but it illustrates how to get at the text in the first place:

$('select#id option').each(function() {
  alert($(this).text());
});

If you use a class instead of an id, then you'd just have to change the 'select#id' to 'select.class'. If you didn't want to add a class/id there are other ways to get at the select.

I leave figuring those ways out if you want to go that route as an activity for the reader.

Answer 6

Assuming you want the selected option's text:

var select = document.getElementById('my_dropdown');
for(var i = 0; i < select.options.length; i++) {
    if(select.options[i].selected) {
        break;
    }
}
var selectText = select.options[i].text;

In Prototype:

var selectText = $$('#my_dropdown option[selected]')[0].text;

Edit: And jQuery for completeness' sake (assuming jQuery's CSS selector support is roughly equivalent to that of Prototype's):

var selectText = $('#my_dropdown option[selected]').get(0).text;