Bootstrap'teki selectpicker eklentisini kullanarak seçili değer nasıl ayarlanır

Ben kullanıyorum Bootstrap-seç böyle eklentisi:

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

Şimdi, düğme tıklandığında seçilen değeri bu seçime ayarlamak istiyorum ... bunun gibi bir şey:

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

Ama hiçbir şey olmadı.

Bunu nasıl başarabilirim?

Değer doğru seçildi, ancak bunu görmediniz çünkü eklenti gerçek seçimi gizler ve sıralanmamış bir liste içeren bir düğme gösterir, bu nedenle, kullanıcının seçimde seçilen değeri görmesini istiyorsanız, bunun gibi bir şey yapabilirsiniz. :

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

Düzenle:

@Blushrt'ın işaret ettiği gibi, daha iyi bir çözüm şudur:

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

Düzenleme 2:

Birden çok değer seçmek için değerleri bir dizi olarak iletin.

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

Tek yapmanız gereken bu. Doğrudan seçicinin oluşturulan html'sini değiştirmeye gerek yoktur, sadece gizli seçim alanını değiştirin ve ardından seçiciyi çağırın ('yenile').

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

Değeri ayarlamak için "val" parametresi kullanılırsa yenilemeye gerek yoktur, bkz. Keman . Birden çok seçili değeri etkinleştirmek için değer için parantez kullanın.

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

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

Bu benim için çalıştı.

Aslında değeriniz belirlenmiş, ancak seçiciniz yenilenmemiş

Belgelerden okuyabileceğiniz gibi
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

Bunu yapmanın doğru yolu,

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

Birden çok değer için değer dizisi ekleyebilirsiniz

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

Eleman üzerinde val yöntemini çağırarak seçilen değeri ayarlayabilirsiniz.

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

Bu, çoklu seçimdeki tüm öğeleri seçecektir.

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

ayrıntılar sitede mevcuttur: https://silviomoreto.github.io/bootstrap-select/methods/

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

seçici yerine size selector ya sınıf ya da kimlik verebilirsiniz, örneğin: $('#mySelect').selectpicker('val',your_value)

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

Seçenekler için "sabit kodlanmış" değerlere sahip olmadığınız durumlara ilişkin hafif bir blushrt cevabı varyasyonu (ör. 1, 2, 3, 4 vb.)

Diyelim ki <select>, bazı kullanıcıların GUID'leri olan seçeneklerle bir oluşturdunuz. O zaman seçeneğin değerini bir şekilde çıkarmanız gerekecek <select>.

Aşağıda, seçimin ilk seçeneğini seçiyoruz.

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

Bunu birden çok anahtar kelimeyle bir seçimde kullandık <select multiple>. Bu durumda varsayılan olarak hiçbir şey seçilmez, ancak ilk öğenin her zaman seçilmesini istedik.

@ Blushrt'ın harika cevabına dayanarak bu yanıtı güncelleyeceğim. Sadece kullanıyorum -

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

seçiciye ihtiyacınız olan her şeyi önceden yüklediyseniz çalışır.

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

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

Seçilmesini istediğiniz öğenin değerinin '0' olmasıyla

Eh bunu yapmak için başka bir yol ile, olan bu anahtar kelime, sadece nesne alabilirsiniz bu ve 's değerini manipüle. Örneğin :

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

Ayrıca, bunu çoklu değer için de arayabilirsiniz

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

Daha fazlasını burada https://developer.snapappointments.com/bootstrap-select/methods/ bulabilirsiniz

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

Sadece seçenek koyun: değer elde etmek için seçilir, çünkü önyükleme seçici olarak değişir ve farklı bir şekilde görünür. Ama hala orada seçildi

Kullanıcı Kimliği öğesi için, ardından

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

bunu kullanın ve işe yarayacak:

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