'Seçili' seçim seçeneğini değere göre ayarla

Bir var selectonun içinde bazı seçenekleri ile alan. Şimdi optionsjQuery olanlardan birini seçmem gerekiyor. Ama nasıl sadece biliyorum zaman valueiçinde optionseçilmelidir mı?

Aşağıdaki HTML var:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Değeri olan seçeneği seçmem gerekiyor val2. Bu nasıl yapılabilir?

İşte bir demo sayfası: http://jsfiddle.net/9Stxb/

Seçenekler etiketine girmenizi gerektirmeyen daha kolay bir yol var:

$("div.id_100 select").val("val2");

Bu jQuery yöntemine bakın .

'Val2' değerine sahip bir seçenek seçmek için:

$('.id_100 option[value=val2]').attr('selected','selected');

change()Değeri seçtikten sonra olayı kullanın . Dokümanlardan:

Alan, içerik değişmeden odağı kaybederse, olay tetiklenmez. Etkinliği manuel olarak tetiklemek için .change()bağımsız değişkenler olmadan uygulayın :

$("#select_id").val("val2").change();

Daha fazla bilgi .change () adresindedir .

Önce tümünün seçimini kaldırın ve seçilebilir seçenekleri filtreleyin:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Bekleyen Durumu değere göre ayarlama

   $('#contribution_status_id').val("2");

Benim için aşağıdakiler işi yaptı

$("div.id_100").val("val2").change();

Bence en kolay yol val () ayarını seçmektir, ancak aşağıdakileri kontrol edebilirsiniz. Bkz . JQuery'de seçme ve seçenek etiketi nasıl işlenir? seçenekler hakkında daha fazla bilgi için.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

Optimize edilmemiştir, ancak aşağıdaki mantık bazı durumlarda da yararlıdır.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

Öznitelik seçiciyi kullanarak herhangi bir öznitelik ve değerini seçebilirsiniz [attributename=optionalvalue], böylece durumunuzda seçeneği belirleyebilir ve seçilen özniteliği ayarlayabilirsiniz.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

valueTarafından seçmek istediğiniz değer nerede .

Önceden seçilen herhangi bir değeri kaldırmanız gerekiyorsa, bunun birden fazla kez kullanılması durumunda, önce seçilen özelliği kaldırmak için biraz değiştirmeniz gerekir.

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

En iyi yol şöyle:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

basit bir cevap, html

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jquery'de, aşağıdaki işlevi düğmeyle arayın veya

$('#idUkuran').val(11).change();

basit ve% 100 çalışır, coz onun işten alınan ... :) umut onun yardım ..

Bunu düşünmek için bir neden yok, tek yaptığınız bir mülke erişmek ve ayarlamak. Bu kadar.

Tamam, bazı temel dom: Bunu düz JavaScript'te yapsaydınız, bunu yapardınız:

window.document.getElementById('my_stuff').selectedIndex = 4;

Ama bunu düz JavaScript ile yapmıyorsunuz, jQuery ile yapıyorsunuz. Ve jQuery'de, bir özellik ayarlamak için .prop () işlevini kullanmak istersiniz, böylece bunu şöyle yaparsınız:

$("#my_stuff").prop('selectedIndex', 4);

Her neyse, kimliğinizin benzersiz olduğundan emin olun. Aksi halde, bunun neden işe yaramadığını merak ederek başınızı duvara vuracaksınız.

Bunu yapmanın en kolay yolu:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Çıktı: Bu aktive edecek ENT .

change()Seçim değerini ayarladıktan sonra kullanmak daha iyidir .

$("div.id_100 select").val("val2").change();

Bunu yaparak, kod, kullanıcı tarafından yapılan seçimi değiştirmeye yakın olacak, açıklama JS Fiddle'a dahil edilmiştir :

JS Fiddle

$('#graphtype option[value=""]').prop("selected", true);

Bu #graphtype, select etiketinin kimliğinin olduğu yerde iyi çalışır .

örnek etiket seçin:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

kullanın:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Bu benim için çalışıyor. Bir fantezi kutusu güncelleme formunda bir değeri ayrıştırmak için bu kodu kullanıyorum ve app.js benim tam kaynağı:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

Ve PHP kodum:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

.attr () bazen eski jQuery sürümlerinde çalışmaz, ancak .prop () kullanabilirsiniz :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

Bu, Denetim Seçimi için kesin olarak çalışır :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

Sadece bu kodu girin:

$("#Controls_ID").val(value);

Kaynak Bağlantı

DropDown'da Tek ve Birden Çok Değer Seçimi için val () jQuery Yöntemini Kullanın

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

Bunu dene. Basit ama etkili javaScript + jQuery ölümcül birleşik.

Bileşen Seçin:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Seçim:

document.getElementById("YourSelectComponentID").value = 4;

Şimdi 4. seçeneğiniz seçilecektir. Varsayılan olarak başlangıçta değerleri seçmek için bunu yapabilirsiniz.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

veya basit bir işlev oluşturun satırı içine koyun ve seçeneği seçmek için anyEvent üzerindeki işlevi çağırın

Bir jQuery + javaScript karışımı sihir yapar ....

Eski yazı ama burada jQuery eklentisi gibi davranan basit bir işlev.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Sadece böyle bir şey yapabilirsiniz:

$('.id_100').selectOption('val2');

Neden bunu kullanıyorsunuz?

Temelde insan aksiyon simülasyonudur.

• Dinamik olarak değiştirmek istediğiniz değeri, HTML'nizde tanımladığınız seçeneklerde mevcut olanla aynı olmalıdır case sensative. Seçim kutunuzu dinamik olarak aşağıdaki gibi değiştirebilirsiniz,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

Denetimler statik bir HTML sayfasında olmak yerine dinamik olarak oluşturulduğunda, seçmeli açılır denetimlerin dinamik olarak değişmemesiyle ilgili bir sorun var gibi görünüyor.

JQuery'de bu çözüm benim için çalıştı.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Bir ek olarak, ikinci satır olmadan ilk kod satırı, şeffaf bir şekilde işe yaradı, dizini ayarladıktan sonra seçilen dizini almak doğruydu ve kontrolü gerçekten tıkladıysanız doğru öğeyi gösterecekti ama bu yansıtmadı kontrolün üst etiketinde.

Bu yardımcı olur umarım.

Değer bir kimlik ve metin bir kod olduğunda karşılaştığım bir sorun. Kodu kullanarak değeri ayarlayamazsınız, ancak kimliğe doğrudan erişiminiz yok.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

benim için çalışıyor

$("#id_100").val("val2");

Bu iyi çalışıyor

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });