Setel opsi pilih 'terpilih', berdasarkan nilai

Saya punya select bidang dengan beberapa opsi di dalamnya. Sekarang saya harus memilih salah satu dari mereka optionsdengan jQuery. Tapi bagaimana saya bisa melakukan itu ketika saya hanya tahu valuedari optionyang harus dipilih?

Saya memiliki HTML berikut:

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

Saya perlu memilih opsi dengan nilai val2. Bagaimana ini bisa dilakukan?

Ini halaman demo: http://jsfiddle.net/9Stxb/

Ada cara yang lebih mudah yang tidak mengharuskan Anda masuk ke tag opsi:

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

Lihat metode jQuery ini .

Untuk memilih opsi dengan nilai 'val2':

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

Gunakan change()acara setelah memilih nilainya. Dari dokumen:

Jika bidang kehilangan fokus tanpa konten berubah, acara tidak dipicu. Untuk memicu acara secara manual, terapkan .change()tanpa argumen:

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

Informasi lebih lanjut ada di .change () .

Hapus centang semua terlebih dahulu dan filter opsi yang dipilih:

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

Mengatur ke Status Tertunda berdasarkan nilai

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

Bagi saya yang berikut melakukan pekerjaan

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

Saya pikir cara termudah adalah memilih untuk mengatur val (), tetapi Anda dapat memeriksa yang berikut ini. Lihat Bagaimana menangani tag pilih dan opsi di jQuery? untuk detail lebih lanjut tentang opsi.

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

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

Tidak dioptimalkan, tetapi logika berikut ini juga berguna dalam beberapa kasus.

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

Anda dapat memilih atribut apa saja dan nilainya dengan menggunakan pemilih atribut [attributename=optionalvalue], jadi dalam kasus Anda, Anda dapat memilih opsi dan mengatur atribut yang dipilih.

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

Dimana value nilai yang ingin Anda pilih.

Jika Anda perlu menghapus nilai-nilai yang dipilih sebelumnya, seperti halnya jika ini digunakan beberapa kali Anda harus mengubahnya sedikit sehingga terlebih dahulu menghapus atribut yang dipilih

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

Cara terbaik adalah seperti ini:

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

jawaban yang sederhana adalah, di 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>

pada jquery, panggil fungsi di bawah ini dengan tombol atau apa pun

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

sederhana dan 100% berfungsi, karena diambil dari pekerjaan saya ... :) semoga membantu ..

Tidak ada alasan untuk terlalu banyak berpikir, yang Anda lakukan hanyalah mengakses dan mengatur properti. Itu dia.

Oke, jadi beberapa dom dasar: Jika Anda melakukan ini dalam JavaScript lurus, Anda akan melakukannya:

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

Tapi Anda tidak melakukannya dengan JavaScript langsung, Anda melakukannya dengan jQuery. Dan di jQuery, Anda ingin menggunakan fungsi .prop () untuk mengatur properti, jadi Anda akan melakukannya seperti ini:

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

Bagaimanapun, pastikan id Anda unik. Jika tidak, Anda akan membenturkan kepala ke dinding sambil bertanya-tanya mengapa ini tidak berhasil.

Cara termudah untuk melakukannya adalah:

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');

Output: Ini akan mengaktifkan THT .

Lebih baik digunakan change()setelah menetapkan nilai pilih.

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

Dengan melakukan ini, kode akan menutup untuk mengubah pilih oleh pengguna, penjelasannya disertakan dalam JS Fiddle :

JS Fiddle

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

Ini berfungsi dengan baik di mana #graphtypeid dari tag pilih.

contoh pilih tag:

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

Menggunakan:

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

Ini bekerja untuk saya. Saya menggunakan kode ini untuk menguraikan nilai dalam formulir pembaruan fancybox, dan sumber lengkap saya dari app.js adalah:

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

Dan kode PHP saya adalah:

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 () terkadang tidak berfungsi di versi jQuery yang lebih lama, tetapi Anda dapat menggunakan .prop () :

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

Ini bekerja pasti untuk Pilih Kontrol :

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

Masukkan saja kode ini:

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

Tautan Sumber

Gunakan val () Metode jQuery untuk Seleksi Nilai Tunggal dan Beberapa di DropDown

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

Coba ini. JavaScript sederhana namun efektif + jQuery kombo yang mematikan.

PilihKomponen:

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

Seleksi:

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

Sekarang opsi 4 Anda akan dipilih. Anda dapat melakukan ini, untuk memilih nilai saat mulai secara default.

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

atau buat fungsi sederhana taruh baris di dalamnya dan panggil fungsi di anyEvent untuk memilih opsi

Campuran jQuery + javaScript melakukan ....

Sudah posting lama tapi di sini ada satu fungsi sederhana yang berfungsi seperti plugin jQuery.

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

        return this;
    };

Anda cukup sederhana dapat melakukan sesuatu seperti ini:

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

Reson mengapa menggunakan ini karena Anda mengubah satemant yang dipilih menjadi DOM yang didukung crossbrowser dan juga akan memicu perubahan agar Anda dapat menangkapnya.

Apakah pada dasarnya simulasi aksi manusia.

• Anda harus mengingat nilai yang ingin Anda ubah secara dinamis, harus sama dengan satu hadiah dalam opsi yang Anda tetapkan dalam HTML Anda apa adanya case sensative. Anda dapat mengubah kotak pilih Anda secara dinamis sebagai berikut,

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

Tampaknya ada masalah dengan kontrol pilih turun yang tidak berubah secara dinamis saat kontrol dibuat secara dinamis alih-alih berada di halaman HTML statis.

Di jQuery solusi ini bekerja untuk saya.

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

Sama seperti adendum baris kode pertama tanpa baris kedua, benar-benar bekerja secara transparan dalam hal itu, mengambil indeks yang dipilih adalah benar setelah mengatur indeks dan jika Anda benar-benar mengklik kontrol itu akan menampilkan item yang benar tetapi ini tidak mencerminkan di label atas kontrol.

Semoga ini membantu.

Masalah yang saya alami ketika nilainya adalah ID dan teksnya adalah kode. Anda tidak dapat menetapkan nilai menggunakan kode tetapi Anda tidak memiliki akses langsung ke ID.

var value;

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

//Do work here

ini bekerja untuk saya

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

Ini bekerja dengan baik

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