How to get the text of a selected item in a select control?

Question

 <select name="DropList" id="serverDropList"> 
  <option selected="selected" value="2">server1:3000</option> 
  <option value="5">server3:3000</option> 
 </select> 

i know in prototype i can get value by $('serverDropList').value but how can i get "server1:3000" ?

Solution 1

I don't think Prototype has any shortcut that does that for you, so:

var box = $('serverDropList');
var text = box.selectedIndex >= 0 ? box.options[box.selectedIndex].innerHTML : undefined;

...gives you the innerHTML of the selected option, or undefined if there is none.

If you like, you can use Element#addMethods to define this once and have it available on all of your select boxes:

Element.addMethods("SELECT", (function() {
    function getSelectedOptionHTML(element) {
        if (!(element = $(element))) return;
        var index = element.selectedIndex;
        return index >= 0 ? element.options[index].innerHTML : undefined;
    }

    return {
        getSelectedOptionHTML: getSelectedOptionHTML
    };
})());

Usage:

var text = $('serverDropList').getSelectedOptionHTML();

I used a named function when defining that. If you're not bothered about named functions (I am, I always use them), you can make it a bit simpler:

Element.addMethods("SELECT", {
    getSelectedOptionHTML: function(element) {
        if (!(element = $(element))) return;
        var index = element.selectedIndex;
        return index >= 0 ? element.options[index].innerHTML : undefined;
    }
);

Solution 2

If you are using Prototype, you may use:

var text = $('serverDropList')[$('serverDropList').selectedIndex].text;

Solution 3

I'm sorry if i am late with this answer, but i was looking into the same problem and i wasn't satisfied with this answer, so i dug for a better answer:

Prototype has the following selector that you can use in order cu get the selected value of your list: $F. So in you example situation, it should work the following code:

$F('serverDropList'); -- this for getting the value
$F('serverDropList').text; -- this for getting the text

Solution 4

function getSelectedValue( obj ) {
    return obj.options[obj.selectedIndex].value;
}

Usage:

<select onchange="alert(getSelectedValue(this););" id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>

or

getSelectedValue(document.getElementById('mySelect'));

or (when using prototype or jquery)

getSelectedValue($('mySelect'));

View more solutions

Comments

[Damon]

this is much nicer.. is there a way to mash that together with a this created by an onchange?

[Decebal]

I'm not very sure if this function is supported for all the browsers, so you could check that, otherwise you could have made a mistake, submit a fiddle so i can help your cause

[cjc343]

This does not return the text value, but the value property of the selected item. The OP was asking for the text value of the selected option.

[Apeiron]

THis should be the RIGHT answer. Perfect