วิธีตั้งค่าที่เลือกบน select โดยใช้ปลั๊กอิน selectpicker จาก bootstrap

ฉันใช้ปลั๊กอินBootstrap-Selectดังนี้:

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

ตอนนี้ฉันต้องการตั้งค่าที่เลือกเพื่อเลือกนี้เมื่อคลิกปุ่ม ... อะไรทำนองนี้:

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

แต่ไม่มีอะไรเกิดขึ้น

ฉันจะบรรลุเป้าหมายนี้ได้อย่างไร?

ค่าถูกเลือกอย่างถูกต้อง แต่คุณไม่เห็นเพราะปลั๊กอินซ่อนการเลือกจริงและแสดงปุ่มที่มีรายการที่ไม่ได้เรียงลำดับดังนั้นหากคุณต้องการให้ผู้ใช้เห็นค่าที่เลือกในการเลือกคุณสามารถทำสิ่งนี้ได้ :

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

แก้ไข:

เช่นเดียวกับที่ @blushrt ชี้ให้เห็นทางออกที่ดีกว่าคือ:

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

แก้ไข 2:

หากต้องการเลือกหลายค่าให้ส่งผ่านค่าเป็นอาร์เรย์

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

นี่คือทั้งหมดที่คุณต้องทำ ไม่จำเป็นต้องเปลี่ยน html ที่สร้างขึ้นของ selectpicker โดยตรงเพียงแค่เปลี่ยนฟิลด์การเลือกที่ซ่อนอยู่จากนั้นเรียกใช้ selectpicker ('refresh')

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

ไม่มีการฟื้นฟูเป็นสิ่งจำเป็นถ้า "วาล" -parameter ถูกนำมาใช้สำหรับการตั้งค่าดูซอ ใช้วงเล็บสำหรับค่าเพื่อเปิดใช้งานค่าที่เลือกหลายค่า

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

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

สิ่งนี้ได้ผลสำหรับฉัน

จริงๆแล้วค่าของคุณถูกตั้งไว้ แต่ตัวเลือกของคุณไม่ได้รับการรีเฟรช

ดังที่คุณสามารถอ่านได้จากเอกสาร
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

วิธีที่เหมาะสมในการทำเช่นนี้จะเป็น

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

สำหรับหลายค่าคุณสามารถเพิ่มอาร์เรย์ของค่าได้

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

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

แทนตัวเลือกคุณสามารถให้ตัวเลือกคลาสหรือ id ตัวอย่างเช่น: $('#mySelect').selectpicker('val',your_value)

คุณสามารถตั้งค่าที่เลือกได้โดยเรียกใช้วิธีการ val บนองค์ประกอบ

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

การดำเนินการนี้จะเลือกรายการทั้งหมดแบบเลือกหลายรายการ

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

ดูรายละเอียดได้ที่เว็บไซต์: https://silviomoreto.github.io/bootstrap-select/methods/

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

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

คำตอบของ blushrtรูปแบบเล็กน้อยเมื่อคุณไม่มีค่า "ฮาร์ดโค้ด" สำหรับตัวเลือก (เช่น 1, 2, 3, 4 เป็นต้น)

สมมติว่าคุณแสดงผล<select>โดยมีค่าตัวเลือกเป็น GUID ของผู้ใช้บางราย จากนั้นคุณจะต้องแยกค่าของตัวเลือกเพื่อตั้งค่าในไฟล์<select>.

ต่อไปนี้เราเลือกตัวเลือกแรกของการเลือก

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

<select multiple>เราใช้วิธีนี้ในการเลือกที่มีคำหลักหลาย ในกรณีนี้ไม่มีการเลือกค่าเริ่มต้น แต่เราต้องการให้เลือกรายการแรกเสมอ

จากคำตอบที่ดีของ @blushrt ฉันจะอัปเดตคำตอบนี้ เพียงแค่ใช้ -

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

ใช้งานได้หากคุณได้โหลดทุกสิ่งที่คุณต้องการไว้ล่วงหน้าให้กับตัวเลือก

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

โดยให้ '0' เป็นค่าของรายการที่คุณต้องการเลือก

อีกวิธีหนึ่งในการทำเช่นนี้คือด้วยคีย์เวิร์ดนี้คุณสามารถรับวัตถุในสิ่งนี้และจัดการกับค่าของมันได้ เช่น :

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

นอกจากนี้คุณสามารถเรียกสิ่งนี้ว่าหลายค่าได้

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

คุณสามารถค้นหาเพิ่มเติมได้ที่นี่https://developer.snapappointments.com/bootstrap-select/methods/

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

เพียงใส่ตัวเลือก: เลือกเพื่อรับค่าเนื่องจากตัวเลือก bootstrap เปลี่ยนเป็นและปรากฏในลักษณะที่แตกต่างกัน แต่เลือกยังคงมีเลือก

ID ผู้ใช้สำหรับองค์ประกอบแล้ว

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

ใช้สิ่งนี้และมันจะได้ผล:

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