[javascript] JQuery: cómo seleccionar el elemento desplegable según el valor


4 Answers

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

Opcionalmente,

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

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

Demo en vivo

Question

Quiero configurar un menú desplegable (seleccionar) para que cambie en función del 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?




Puede usar este código jQuery que me resulta 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>




Puedes simplemente usar:

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



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

Puedes probar dos opciones:

Este es el resultado cuando desea asignar basado en el valor del índice, donde '0' es Index.

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

no use 'attr' ya que está en desuso 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




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 la interfaz de usuario de jQuery Autocomplete no está poblado por código.

La solución es mucho más fácil. Debido a que tuve que pasar a través de otras publicaciones donde se suponía que el control se cargaba dinámicamente, no estaba encontrando lo que necesitaba y finalmente lo descubrí.

Entonces, si tiene HTML como se muestra a continuación, establecer el índice seleccionado se establece de esta manera, tenga en cuenta la parte de entrada, que es adicional al ID 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 descubrió sobre el control Autocompletar es cómo desactivarlo / vaciarlo correctamente. Tenemos 3 controles trabajando juntos, 2 de ellos mutuamente exclusivos:

//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ó un tiempo para descifrarlo, se comparte.

Y también ... 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 llevó demasiado tiempo aprender estas cosas sobre la marcha. Espero que esto sea útil.




Related