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

Answer 1

If you are using Prototype, you may use:

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

Answer 2

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