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




un span (17)

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.


Answers

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

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

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

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


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


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

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

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


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.


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

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.


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

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

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>


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>

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

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

Seleccione Texto y valor seleccionado en el menú desplegable / seleccione cambio en jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})




javascript jquery drop-down-menu jquery-selectors