get de jQuery de la opción específica del texto de la etiqueta

Question

Bien, decir 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>

¿Cuál sería el selector de mirar como si yo quería "Opción B" cuando tengo el valor '2'?

Por favor, tenga en cuenta que esto no es preguntar cómo obtener la seleccionado valor de texto, pero sólo uno de ellos, seleccionados o no, dependiendo del valor del atributo.He intentado:

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

Pero no es trabajo.

Answer 1

Está buscando un elemento con id list que tenga una propiedad value igual a 2. Lo que quiere es el option hijo del <=>.

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

Answer 2

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

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

---

Si desea obtener la opción que esté seleccionada actualmente, use

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

Answer 3

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 de 1.6 a 1.9 del sitio usé este código, esto dejó de funcionar ... probablemente fue un conflicto con otro código ... de todos modos, la solución fue eliminar opción de la llamada find ():

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

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

Answer 4

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.

Answer 5

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

para múltiples valores seleccionados en el elemento #list.

Answer 6

1. Si solo hay una etiqueta select en la página, entonces puede especificar select dentro de la id 'lista'

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

2. Para obtener el texto seleccionado

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

Answer 7

Pruebe lo siguiente:

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

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

Answer 8

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

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

Espero que esto ayude :-)

Answer 9

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

Answer 10

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

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

Answer 11

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

deja un espacio después del selector de id.

Answer 12

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

puede llamar a la función de esta manera:

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

Answer 13

Mientras que el "bucle" a través de la creación dinámica de seleccionar elementos .each(function()...): $("option:selected").text(); y $(this + " option:selected").text() no devolver el texto de la opción seleccionada - lugar era nulo.

Pero Peter Mortensen la solución funcionó:

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

No sé por qué, la manera usual de no tener éxito en un .each() (probablemente por mi culpa), pero gracias, Pedro.Sé que no era la pregunta original, pero estoy mencionando "para los novatos que vienen a través de Google."

Yo habría empezado con $('#list option:selected").each() excepto que yo necesitaba para agarrar cosas desde el que seleccionar el elemento así.

Answer 14

Uso:

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

Answer 15

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 necesitaba, 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(); 

Answer 16

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

Esto, por supuesto, utiliza el objeto DOM en lugar de analizar su HTML con nodeValue, childNodes, etc. .

Answer 17

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 obtiene texto de etiqueta de opción específica y coloca una variable dinámica en el valor

Answer 18

Como solución alternativa, también puede utilizar una parte de contexto del selector jQuery para buscar <option> elemento (s) con value="2" dentro de la lista desplegable:

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

Answer 19

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>

Answer 20

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>

Answer 21

Si desea obtener el valor seleccionado, entonces:

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