¿Cómo obtener el texto de un elemento seleccionado en un control de selección?

Question

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

Sé en prototipo que puedo obtener valor por $('serverDropList').value, pero ¿cómo puedo obtener "server1: 3000"?

Answer 1

No creo prototipo tiene ningún acceso directo que lo hace por usted, por lo que:

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

... le da la innerHTML de la opción seleccionada, o undefined si no hay ninguno.

Si lo desea, puede utilizar Element#addMethods para definir esto de una vez que esté disponible en todos sus cuadros de selección:

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

Uso:

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

que utiliza una función llamada cuando se define ese. Si no te molesta funciones con nombre (que soy, always use them), puede que sea un poco más simple:

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

Answer 2

Si está utilizando prototipo, puede utilizar:

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

Answer 3

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

Uso:

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

o

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

o (cuando se utiliza prototipo o jQuery)

getSelectedValue($('mySelect')); 

Answer 4

Lo siento si estoy tarde con esta respuesta, pero yo estaba buscando en el mismo problema y que no estaba satisfecho con esta respuesta, por lo busqué una mejor respuesta:

Prototype tiene el siguiente selector que puede usar para obtener el valor seleccionado de su lista: $ F. Así que en situación ejemplo, debería funcionar el siguiente código:

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

Answer 5

Seleccione la segunda opción:

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

necesito para recoger la ciudad valor del artículo.