jQuery obtiene texto de etiqueta de opción específica

Muy bien, digamos que tengo esto:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

¿Cómo se vería el selector si quisiera obtener la "Opción B" cuando tengo el valor '2'?

Tenga en cuenta que esto no es preguntar cómo obtener el valor de texto seleccionado , sino cualquiera de ellos, ya sea seleccionado o no, dependiendo del atributo de valor. Lo intenté:

$("#list[value='2']").text();

Pero no está funcionando.

Está buscando un elemento con id listque tenga una propiedad valueigual a 2.
Lo que quieres es optionhijo de list:

$("#list option[value='2']").text()

Si desea obtener la opción con un valor de 2, use

$("#list option[value='2']").text();

Si desea obtener la opción seleccionada actualmente, use

$("#list option:selected").text();

Esto funcionó perfectamente para mí, estaba buscando una forma de enviar dos valores diferentes con opciones generadas por MySQL, y lo siguiente es genérico y dinámico:

$(this).find("option:selected").text();

Como se menciona en uno de los comentarios. Con esto pude crear una función dinámica que funciona con todos mis cuadros de selección de los que quiero obtener ambos valores, el valor de la opción y el texto.

Hace unos días noté que al actualizar jQuery del 1.6 al 1.9 del sitio usé este código, esto dejó de funcionar ... probablemente fue un conflicto con otro fragmento de código ... de todos modos, la solución fue eliminar la opción del llamada find ():

$(this).find(":selected").text();

Esa fue mi solución ... úsela solo si tiene algún problema después de actualizar su jQuery.

Basado en el HTML original publicado por Paolo, se me ocurrió lo siguiente.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Ha sido probado para funcionar en Internet Explorer y Firefox.

$("#list option:selected").each(function() {
   alert($(this).text());
});  

para múltiples valores seleccionados en el #listelemento.

1. Si solo hay una etiqueta de selección en la página, puede especificar seleccionar dentro de la ID 'lista'

   jQuery("select option[value=2]").text();

2. Para obtener el texto seleccionado

   jQuery("select option:selected").text();

Intenta lo siguiente:

$("#list option[value=2]").text();

La razón por la que su fragmento original no funcionaba es porque sus OPTIONetiquetas son secundarias a su SELECTetiqueta, que tiene el id list.

Esta es una vieja pregunta que no se ha actualizado en algún momento, la forma correcta de hacerlo ahora sería usar

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Espero que esto ayude :-)

Quería obtener la etiqueta seleccionada. Esto funcionó para mí en jQuery 1.5.1.

$("#list :selected").text();

$(this).children(":selected").text()

$("#list [value='2']").text();

deje un espacio después del selector de id.

Puede obtener el texto de la opción seleccionada utilizando la función .text();

puedes llamar a la función así:

jQuery("select option:selected").text();

Mientras realiza un "bucle" a través de elementos seleccionados creados dinámicamente con un .each (function () ...): $("option:selected").text();y$(this + " option:selected").text() no devolvía el texto de la opción seleccionada, en su lugar, era nulo.

Pero la solución de Peter Mortensen funcionó:

$(this).find("option:selected").text();

No sé por qué la forma habitual no tiene éxito en .each()(probablemente mi propio error), pero gracias, Peter. Sé que esa no era la pregunta original, pero la menciono "para los novatos que vienen a través de Google".

Hubiera comenzado con, $('#list option:selected").each()excepto que también necesitaba tomar cosas del elemento seleccionado.

Utilizar:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});

Estaba buscando obtener val por nombre de campo interno en lugar de ID y vine de google a esta publicación que ayuda pero no encontré la solución que necesito, pero obtuve la solución y aquí está:

Por lo tanto, esto podría ayudar a alguien que busca el valor seleccionado con el nombre interno del campo en lugar de usar una identificación larga para las listas de SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 

Necesitaba esta respuesta ya que estaba tratando con un objeto emitido dinámicamente, y los otros métodos aquí no parecían funcionar:

element.options[element.selectedIndex].text

Por supuesto, esto usa el objeto DOM en lugar de analizar su HTML con nodeValue, childNodes, etc.

Un consejo: puede usar el siguiente código si su valor es dinámico:

$("#list option[value='"+aDynamicValue+"']").text();

O (mejor estilo)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Como se menciona en jQuery, obtenga un texto de etiqueta de opción específico y coloque la variable dinámica en el valor

Como solución alternativa, también puede usar una parte de contexto del selector jQuery para encontrar <option>elementos value="2"dentro de la lista desplegable:

$("option[value='2']", "#list").text();

Quería una versión dinámica para seleccionar múltiples que mostrara lo que está seleccionado a la derecha (desearía haber leído y visto $(this).find... anteriormente):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Puede obtener una de las siguientes formas

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>