CODEWITHSUNDEEP
javascriptdom
Marcus
Marcus

Reputation: 5828

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

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?

Upvotes: 3

Views: 11964

Answers (6)

eyelidlessness
eyelidlessness

Reputation: 63519

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;

Upvotes: 2

Liam
Liam

Reputation: 20940

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

Upvotes: 10

Leanan
Leanan

Reputation: 732

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.

Upvotes: 1

Mark Biek
Mark Biek

Reputation: 150759

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".

Upvotes: 0

Adam Bellaire
Adam Bellaire

Reputation: 110489

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;

Upvotes: 1

Joe Scylla
Joe Scylla

Reputation: 701

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;

Upvotes: 4

Related Questions