javascript - link - obtener texto de un span jquery

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

Question

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 serí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.

Answer 1

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

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

2. Para obtener texto seleccionado

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

Answer 2

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

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

Se ha probado que funciona en Internet Explorer y Firefox.

Answer 3

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

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

Answer 4

Está buscando un elemento con list ID que tenga un value propiedad igual a 2. Lo que desea es la option hijo de la list .

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

Answer 5

Esta es una pregunta antigua 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 6

Estaba buscando obtener val por nombre de campo interno en lugar de ID y vine de google a esta publicación que me ayudó 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 busque un valor seleccionado con el nombre interno del campo en lugar de usar la identificación larga para las listas de SharePoint:

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

Answer 7

Esto funcionó perfectamente para mí, estaba buscando una manera 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 y quiero obtener ambos valores, el valor de opción y el texto.

Hace unos días me di cuenta de que al actualizar jQuery de 1.6 a 1.9 del sitio, utilicé este código, esta parada de trabajo ... probablemente era un conflicto con otra pieza de código ... de todos modos, la solución era eliminar la opción del buscar () llamar:

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

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

Answer 8

Intenta lo siguiente:

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

La razón por la que su fragmento de código original no estaba funcionando es porque sus etiquetas de OPTION son secundarias a su etiqueta SELECT , que tiene la list id .

Answer 9

Mientras se "repite" a través de elementos dinámicamente creados, seleccione con .each (function () ...): $("option:selected").text(); y $(this + " option:selected").text() no devolvió 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 un .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".

Habría empezado con $(''#list option:selected").each() excepto que también necesitaba tomar cosas del elemento seleccionado.

Answer 10

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

element.options[element.selectedIndex].text

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

Answer 11

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

Puedes llamar a la función así:

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

Answer 12

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 13

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

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

Answer 14

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

<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 15

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

Answer 16

Un consejo: puedes usar el código de abajo si tu 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ífica y coloque una variable dinámica en el valor

Answer 17

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

Answer 18

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

Deja un espacio después del selector de id.

Answer 19

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

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

Answer 20

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