Cách đặt giá trị đã chọn trên select bằng plugin selectpicker từ bootstrap

Tôi đang sử dụng plugin Bootstrap-Select như sau:

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

Bây giờ tôi muốn đặt giá trị được chọn cho lựa chọn này khi nút được nhấp vào ... một cái gì đó như thế này:

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

Nhưng không có gì xảy ra.

Làm thế nào tôi có thể đạt được điều này?

Giá trị được chọn chính xác, nhưng bạn không nhìn thấy nó vì plugin ẩn vùng chọn thực và hiển thị một nút có danh sách không có thứ tự, vì vậy, nếu bạn muốn người dùng thấy giá trị đã chọn trên vùng chọn, bạn có thể làm như thế này :

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

Biên tập:

Giống như @blushrt đã chỉ ra, giải pháp tốt hơn là:

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

Chỉnh sửa 2:

Để chọn nhiều giá trị, hãy chuyển các giá trị dưới dạng một mảng.

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

Đây là tất cả những gì bạn cần làm. Không cần thay đổi trực tiếp html đã tạo của selectpicker, chỉ cần thay đổi trường select ẩn, sau đó gọi selectpicker ('refresh').

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

Không cần làm mới nếu tham số "val" được sử dụng để thiết lập giá trị, xem fiddle . Sử dụng dấu ngoặc cho giá trị để bật nhiều giá trị đã chọn.

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

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

Điều này đã làm việc cho tôi.

Trên thực tế, giá trị của bạn đã được đặt, nhưng trình chọn của bạn không được làm mới

Như bạn có thể đọc từ tài liệu
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

Cách đúng để làm điều này sẽ là

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

Đối với nhiều giá trị, bạn có thể thêm mảng giá trị

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

Bạn có thể đặt giá trị đã chọn bằng cách gọi phương thức val trên phần tử.

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

Thao tác này sẽ chọn tất cả các mục trong nhiều lựa chọn.

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

chi tiết có trên trang web: https://silviomoreto.github.io/bootstrap-select/methods/

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

thay cho bộ chọn, bạn có thể cung cấp cho bộ chọn lớp hoặc id, ví dụ: $('#mySelect').selectpicker('val',your_value)

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

Một biến thể nhỏ của câu trả lời của blushrt khi bạn không có các giá trị "được mã hóa cứng" cho các tùy chọn (tức là 1, 2, 3, 4, v.v.)

Giả sử bạn kết xuất a <select>với các giá trị tùy chọn là GUID của một số người dùng. Sau đó, bạn sẽ cần phải trích xuất bằng cách nào đó giá trị của tùy chọn để đặt nó trên <select>.

Trong phần sau, chúng tôi chọn tùy chọn đầu tiên của lựa chọn.

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

Chúng tôi đã sử dụng điều này trong một lựa chọn với nhiều từ khóa <select multiple>. Trong trường hợp này, không có gì được chọn theo mặc định, nhưng chúng tôi muốn mục đầu tiên luôn được chọn.

Dựa trên câu trả lời tuyệt vời của @blushrt, tôi sẽ cập nhật câu trả lời này. Chỉ sử dụng -

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

hoạt động nếu bạn đã tải trước mọi thứ bạn cần vào bộ chọn.

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

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

Với '0' là giá trị của mục bạn muốn chọn

Có một cách khác để làm điều đó là, với từ khóa này , bạn có thể chỉ cần lấy đối tượng trong này và thao tác giá trị của nó. Ví dụ :

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

Ngoài ra, bạn chỉ có thể gọi điều này cho nhiều giá trị

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

Bạn có thể tìm thêm ở đây https://developer.snapappointments.com/bootstrap-select/methods/

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

Chỉ cần đặt tùy chọn: được chọn để nhận giá trị, bởi vì bộ chọn bootstrap thay đổi thành và xuất hiện theo cách khác nhau. Nhưng chọn vẫn có chọn

ID người dùng Đối với phần tử, sau đó

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

sử dụng cái này và nó sẽ hoạt động:

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