JQuery - jak wybrać rozwijaną pozycję na podstawie wartości

Chcę ustawić listę rozwijaną (wybierz), która ma być zmieniana na podstawie wartości wpisów.

mam

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

I wiem, że chcę zmienić listę rozwijaną, aby była wybrana opcja o wartości „fg”. Jak mogę to zrobić za pomocą JQuery?

Powinieneś użyć

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

Oto przykład:

$('#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');

Opcjonalnie,

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

gdzie 3jest indeks żądanej opcji.

Live Demo

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

Możesz użyć tego kodu jQuery, którego uważam za łatwiejsze w użyciu:

$('#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");

Możesz po prostu użyć:

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

W twoim przypadku $("#mySelect").val("fg"):)

Może być za późno na odpowiedź, ale przynajmniej ktoś otrzyma pomoc.

Możesz wypróbować dwie opcje:

Jest to wynik, gdy chcesz przypisać na podstawie wartości indeksu, gdzie „0” to indeks.

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

nie używaj „attr”, ponieważ jest przestarzałe w najnowszym jquery.

Jeśli chcesz dokonać wyboru na podstawie wartości opcji, wybierz to:

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

gdzie „fg” jest wartością opcji

Ten kod zadziałał dla mnie:

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

Za pomocą tej listy wyboru HTML:

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

Mam inną sytuację, w której wartości listy rozwijanej są już zakodowane na stałe. Istnieje tylko 12 okręgów, więc kontrolka interfejsu użytkownika autouzupełniania jQuery nie jest wypełniana kodem.

Rozwiązanie jest dużo łatwiejsze. Ponieważ musiałem przedzierać się przez inne słupki, w których zakładano, że kontrolka jest dynamicznie ładowana, nie znajdowałem tego, czego potrzebowałem, i w końcu to rozgryzłem.

Więc jeśli masz HTML, jak poniżej, ustawienie wybranego indeksu jest ustawione w ten sposób, zwróć uwagę na część -input, która jest dodatkiem do rozwijanego identyfikatora:

$('#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>

Inną rzeczą, jaką odkryliśmy w kontrolce autouzupełniania, jest to, jak prawidłowo ją wyłączyć / opróżnić. Mamy 3 kontrolki współpracujące ze sobą, 2 z nich wzajemnie się wykluczają:

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

Niektóre z nich wykraczają poza zakres postu i nie wiem, gdzie dokładnie to umieścić. Ponieważ jest to bardzo pomocne i zajęło trochę czasu, aby się zorientować, jest udostępniane.

Und Również ... aby włączyć taką kontrolę, jest (wyłączona, fałszywa) i NIE (włączona, prawda) - to również zajęło trochę czasu, aby się zorientować. :)

Jedyną inną rzeczą, na którą należy zwrócić uwagę, oprócz postu, jest:

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

Wszyscy się dzielili, ponieważ nauczenie się tych rzeczy w locie zajęło zbyt dużo czasu. Mam nadzieję, że to jest pomocne.

$ ('select # myselect option [value = "ab"]').

Możesz wybrać wartość opcji rozwijanej według nazwy

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

});