JQuery: cómo seleccionar un elemento desplegable según el valor

85

Quiero configurar un menú desplegable (seleccionar) para cambiar según el valor de las entradas.

yo tengo

<select id="mySelect">
  <option value="ps">Please Select</option>
  <option value="ab">Fred</option>
  <option value="fg">George</option>
  <option value="ac">Dave</option>
</select>

Y sé que quiero cambiar el menú desplegable para que se seleccione la opción con el valor de "fg". ¿Cómo puedo hacer esto con JQuery?

javascript  jquery  select  jquery-selectors 
— Mark W
fuente
Pensé que era así de simple, pero no pareció funcionar. Supongo que es hora de depurar.
— Mark W
1
— Christopher
1
Tu título es un poco engañoso. No está seleccionando un menú desplegable, está seleccionando una opción en un menú desplegable ... por eso hay 7 respuestas que no me ayudan en absoluto ...
— user1566694
@ user1566694 Si desea obtener información técnica, en realidad no se llama menú desplegable, es un "seleccionar"
— Mark W

Respuestas:

152

Deberías usar

$('#dropdownid').val('selectedvalue');

He aquí un ejemplo:

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
Expandir fragmento

— Jeaf Gilbert
fuente
21
De acuerdo con lo anterior. Según su código, sería$('#mySelect option[value="fg"]').attr('selected', true)
— Martavis P.
Mi error. He visto que no funciona en algunos casos, pero claramente lo hace en el violín.
— Martavis P.
2
Solo tendría cuidado con esto. No activa el evento 'cambiar' en la etiqueta <select>. Si no está utilizando ese evento, está bien.
— Chad Fisher
2
@ChadFisher Si está utilizando el evento de cambio, actívelo con$('#dropdownid').val('selectedvalue').trigger('change');
— Liam
De hecho, el cambio de activación ayuda cuando ha escrito un código de seguimiento para realizar ciertas acciones como la actualización del modelo, incluso las actualizaciones del modelo de vista de ASP.net también ocurren en el evento de cambio del DD. +1
— Div Tiwari
23 
$('#yourdropddownid').val('fg');

Opcionalmente,

$('select>option:eq(3)').attr('selected', true);

donde 3está el índice de la opción que desea.

Demo en vivo

— xbonez
fuente
8

Puede usar este código jQuery que me parece más fácil de usar:

$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="your_id" name="name" class="form-control input-md">
  <option value="1">Option #1</option>
  <option value="2">Option #2</option>
  <option value="3">Option #3</option>
  <option value="4">Option #4</option>
  <option value="5">Option #5</option>
  <option value="6">Option #6</option>
  <option value="7">Option #7</option>
</select>
Expandir fragmento

— Cielo
fuente
7 
 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");
— Abdo-Host
fuente
1
o $ ('# mySelect'). val ('ab'). trigger ("cambiar") ;; en caso de que esté utilizando el complemento select2.
— Vaibhav Jain
1
.change () me ayudó a actualizar mi atributo de modelo ASP.net MVC. Gracias por la respuesta.
— Div Tiwari
Gracias ... .trigger ('cambiar') ¡Funciona perfectamente!
— LUISAO
5

Simplemente puede usar: 

$('#select_id').val('fg')
— Dagang
fuente
2

Puede que sea demasiado tarde para responder, pero al menos alguien recibirá ayuda.

Puedes probar dos opciones:

Este es el resultado cuando desea asignar según el valor del índice, donde '0' es el índice.

 $('#mySelect').prop('selectedIndex', 0);

no use 'attr' ya que está obsoleto con la última jquery.

Cuando desee seleccionar según el valor de la opción, elija esto:

 $('#mySelect').val('fg');

donde 'fg' es el valor de la opción

— Manjuboyz
fuente
La selección basada en índices rara vez se usa, sin embargo, es una buena opción dado el escenario en el que ha escrito un código genérico para configurar los menús desplegables y los valores varían con diferentes DD. Gracias :).
— Div Tiwari
1 

$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
    <option value=''>- Please choose -</option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='selectedvalue'>There we go!</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>
Expandir fragmento

— Siddhartha
fuente
1

Este código funcionó para mí:

$(function() {
    $('[id=mycolors] option').filter(function() { 
        return ($(this).text() == 'Green'); //To select Green
    }).prop('selected', true);
});

Con esta lista de selección HTML:

<select id="mycolors">
      <option value="1">Red</option>
      <option value="2">Green</option>
      <option value="3">Blue</option>
</select>
— Nole
fuente
0

Tengo una situación diferente, donde los valores de la lista desplegable ya están codificados. Solo hay 12 distritos, por lo que el control de IU de autocompletar de jQuery no se completa con código.

La solucion es mucho mas facil. Porque tuve que revisar otras publicaciones donde se asumió que el control se estaba cargando dinámicamente, no encontraba lo que necesitaba y finalmente lo descubrí.

Entonces, donde tiene HTML como se muestra a continuación, la configuración del índice seleccionado se establece así, tenga en cuenta la parte de entrada, que se suma a la identificación desplegable: 

$('#project-locationSearch-dist-input').val('1');

                <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
                <select id="project-locationSearch-dist" data-tabindex="1">
                    <option id="optDistrictOne" value="01">1</option>
                    <option id="optDistrictTwo" value="02">2</option>
                    <option id="optDistrictThree" value="03">3</option>
                    <option id="optDistrictFour" value="04">4</option>
                    <option id="optDistrictFive" value="05">5</option>
                    <option id="optDistrictSix" value="06">6</option>
                    <option id="optDistrictSeven" value="07">7</option>
                    <option id="optDistrictEight" value="08">8</option>
                    <option id="optDistrictNine" value="09">9</option>
                    <option id="optDistrictTen" value="10">10</option>
                    <option id="optDistrictEleven" value="11">11</option>
                    <option id="optDistrictTwelve" value="12">12</option>
                </select>

Otra cosa que se ha descubierto sobre el control Autocompletar es cómo deshabilitarlo / vaciarlo correctamente. Tenemos 3 controles trabajando juntos, 2 de ellos mutuamente excluyentes:

//SPN
spnDDL.combobox({
    select: function (event, ui) {
        var spnVal = spnDDL.val();
        //fire search event
        $('#project-locationSearch-pid-input').val('');
        $('#project-locationSearch-pid-input').prop('disabled', true);
        pidDDL.empty(); //empty the pid list
    }
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();

//PID
pidDDL.combobox({
    select: function (event, ui) {
        var pidVal = pidDDL.val();
        //fire search event
        $('#project-locationSearch-spn-input').val('');
        $('#project-locationSearch-spn-input').prop('disabled', true);
        spnDDL.empty(); //empty the spn list
    }
});

Algo de esto está más allá del alcance de la publicación y no sé dónde ponerlo exactamente. Dado que esto es muy útil y tomó algún tiempo resolverlo, se está compartiendo.

Und Además ... para habilitar un control como este, es (deshabilitado, falso) y NO (habilitado, verdadero), eso también tomó un poco de tiempo para averiguarlo. :)

La única otra cosa a tener en cuenta, además de la publicación, es:

    /*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked.  Thus, it's created at that point in time
and its value must be picked fresh.  Can't be put into a var and re-used
like the drop down list part of the UI control.  So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL);  But you can't
do this with the input part of the control.  Winded explanation, yes.  That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :) 
*/
    //district
    $('#project-locationSearch-dist').combobox({
        select: function (event, ui) {
            //enable spn and pid drop downs
            $('#project-locationSearch-pid-input').prop('disabled', false);
            $('#project-locationSearch-spn-input').prop('disabled', false);
            //clear them of old values
            pidDDL.empty();
            spnDDL.empty();
            //get new values
            GetSPNsByDistrict(districtDDL.val());
            GetPIDsByDistrict(districtDDL.val());
        }
    });

Todos compartidos porque tomó demasiado tiempo aprender estas cosas sobre la marcha. Espero que esto sea útil.

— usuario1585204
fuente
Te has salido del tema aquí. La pregunta es un simple cambio de una selección basada en su valor con JQuery. No hay elementos de la interfaz de usuario involucrados.
— Mark W
0

Puede seleccionar el valor de la opción desplegable por nombre 

// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
 if( jQuery(this).text() == 'Monday' )
 {
  jQuery(this).attr("selected","selected");
  }

});
— Hardik
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.