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

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?

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>

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

Opcionalmente,

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

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

Demo en vivo

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

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>

 $('#mySelect').val('ab').change();

 // or

 $('#mySelect').val('ab').trigger("change");

Simplemente puede usar:

$('#select_id').val('fg')

En tu caso $("#mySelect").val("fg"):)

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

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>

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.

$ ('seleccione la opción # myselect [valor = "ab"]').

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

});