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




obtener valor de un input jquery (14)

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

https://code.i-harness.com

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.


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.


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

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 :-)


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.


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 .


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.


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

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

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

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>


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

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

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


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




jquery-selectors