Cara mengatur nilai yang dipilih pada pilih menggunakan plugin selectpicker dari bootstrap

Saya menggunakan plugin Bootstrap-Select seperti ini:

HTML :

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

Javascript :

$('select[name=selValue]').selectpicker();

Sekarang saya ingin mengatur nilai yang dipilih untuk memilih ini ketika tombol diklik ... sesuatu seperti ini:

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

Tapi tidak ada yang terjadi.

Bagaimana saya bisa mencapai ini?

Nilai dipilih dengan benar, tetapi Anda tidak melihatnya karena plugin menyembunyikan pemilihan yang sebenarnya dan menampilkan tombol dengan daftar tidak berurutan, jadi, jika Anda ingin pengguna melihat nilai yang dipilih pada pilihan, Anda dapat melakukan sesuatu seperti ini :

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

Edit:

Seperti yang ditunjukkan @blushrt, solusi yang lebih baik adalah:

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

Edit 2:

Untuk memilih beberapa nilai, berikan nilai sebagai larik.

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

Hanya ini yang perlu Anda lakukan. Tidak perlu mengubah html yang dihasilkan dari selectpicker secara langsung, cukup ubah bidang pilih tersembunyi, lalu panggil pemilih pilih ('segarkan').

$('.selectpicker').selectpicker('val', YOUR_VALUE);

Tidak diperlukan penyegaran jika parameter "val" digunakan untuk menyetel nilai, lihat biola . Gunakan tanda kurung untuk nilai untuk mengaktifkan beberapa nilai yang dipilih.

$('.selectpicker').selectpicker('val', [1]); 

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

Ini berhasil untuk saya.

Sebenarnya nilai Anda disetel, tetapi pemilih pilihan Anda tidak diperbarui

Seperti yang Anda dapat membaca dari dokumentasi
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

Cara yang benar untuk melakukan ini adalah

$('.selectpicker').selectpicker('val', 1);

Untuk beberapa nilai, Anda dapat menambahkan larik nilai

$('.selectpicker').selectpicker('val', [1 , 2]);

Anda dapat menyetel nilai yang dipilih dengan memanggil metode val pada elemen.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

Ini akan memilih semua item dalam pilihan banyak.

$('.selectpicker').selectpicker('selectAll');

detail tersedia di situs: https://silviomoreto.github.io/bootstrap-select/methods/

$('selector').selectpicker('val',value);

Di tempat selektor Anda dapat memberi Anda selektor baik kelas atau id misalnya: $('#mySelect').selectpicker('val',your_value)

var bar= $(#foo).find("option:selected").val();

Variasi kecil dari blushrt jawaban ketika Anda tidak memiliki nilai "hard code" untuk opsi (yaitu 1, 2, 3, 4 dll.)

Katakanlah Anda merender <select>dengan nilai opsi menjadi GUID dari beberapa pengguna. Maka Anda akan perlu entah bagaimana mengekstrak nilai opsi untuk mengaturnya di <select>.

Berikut ini kami memilih opsi pertama dari pilih.

HTML :

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

Javascript :

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

Kami menggunakan ini dalam pemilihan dengan beberapa kata kunci <select multiple>. Dalam hal ini tidak ada yang dipilih secara default, tetapi kami ingin item pertama selalu dipilih.

Berdasarkan jawaban bagus @blushrt, saya akan memperbarui tanggapan ini. Hanya menggunakan -

$("#Select_ID").val(id);

berfungsi jika Anda telah memuat semua yang Anda butuhkan ke pemilih.

$('.selectpicker').selectpicker("val", "value");

$('.selectpicker').selectpicker('val', '0');

Dengan '0' menjadi nilai item yang ingin Anda pilih

Nah cara lain untuk melakukannya adalah, dengan kata kunci ini , Anda dapat dengan mudah mendapatkan objek di sini dan memanipulasi nilainya. Misal:

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });

Juga, Anda bisa memanggil ini untuk multi-nilai

$(<your select picker>).selectpicker("val", ["value1", "value2"])

Anda dapat menemukan lebih banyak di sini https://developer.snapappointments.com/bootstrap-select/methods/

$('.selectpicker option:selected').val();

Taruh saja opsi: dipilih untuk mendapatkan nilai, karena pemilih bootstrap berubah menjadi dan muncul dengan cara yang berbeda. Tapi pilih tetap ada yang terpilih

ID Pengguna Untuk elemen, lalu

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

gunakan ini dan itu akan berhasil:

 $('select[name=selValue]').selectpicker('val', 1);