JQuery - değere göre açılır öğe nasıl seçilir

Girişlerin değerine göre değiştirilecek bir açılır menü (seç) ayarlamak istiyorum.

Sahibim

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

Ve "fg" değerine sahip seçeneğin seçilmesi için açılır listeyi değiştirmek istediğimi biliyorum. Bunu JQuery ile nasıl yapabilirim?

Kullanmalısın

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

İşte bir örnek:

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

İsteğe bağlı olarak,

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

3istediğiniz seçeneğin dizini nerede .

Canlı Demo

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

Kullanmayı daha kolay bulduğum bu jQuery kodunu kullanabilirsiniz:

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

Şunları kullanabilirsiniz:

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

Senin durumunda $("#mySelect").val("fg"):)

Cevap vermek için çok geç olabilir ama en azından biri yardım alacak.

İki seçeneği deneyebilirsiniz:

Bu, indeks değerine dayalı olarak atamak istediğinizde elde edilen sonuçtur, burada '0', Dizindir.

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

en son jquery ile kullanımdan kaldırıldığı için 'attr' kullanmayın.

Seçenek değerine göre seçim yapmak istediğinizde, şunu seçin:

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

burada 'fg' seçenek değeridir

Bu kod benim için çalıştı:

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

Bu HTML seçim listesi ile:

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

Açılır liste değerlerinin zaten sabit kodlandığı farklı bir durumum var. Yalnızca 12 bölge vardır, bu nedenle jQuery Otomatik Tamamlama kullanıcı arabirimi denetimi kodla doldurulmaz.

Çözüm çok daha kolay. Çünkü kontrolün dinamik olarak yüklendiğini varsayarak, ihtiyacım olanı bulamadığım ve sonunda onu anladığım diğer gönderilerde ilerlemek zorunda kaldım.

Bu nedenle, aşağıdaki gibi HTML'ye sahip olduğunuz yerde, seçilen dizini ayarlamak şu şekilde ayarlanır, açılır kimliğe ek olarak -input kısmına dikkat edin:

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

Otomatik Tamamlama denetimi hakkında keşfedilen başka bir şey, onu nasıl düzgün bir şekilde devre dışı bırakıp / boşaltabileceğidir. Birlikte çalışan 3 kontrolümüz var, bunlardan ikisi birbirini dışlıyor:

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

Bunların bir kısmı yazının kapsamı dışındadır ve tam olarak nereye koyacağımı bilmiyorum. Bu çok yardımcı olduğu ve anlaşılması biraz zaman aldığı için paylaşılıyor.

Und Ayrıca ... bunun gibi bir kontrolü etkinleştirmek için, bu (devre dışı, yanlış) ve DEĞİL (etkin, doğru) - bu da biraz zaman aldı. :)

Gönderiye ek olarak dikkat edilmesi gereken tek şey şudur:

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

Hepsi paylaşıldı çünkü bunları anında öğrenmek çok uzun sürdü. Umarım bu yardımcı olur.

$ ('# myselect seçeneğini seçin [değer = "ab"]').

Açılır seçenek değerini ada göre seçebilirsiniz

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

});