How to set selected value on select using selectpicker plugin from bootstrap

I'm using the Bootstrap-Select plugin like this:

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

Now I want to set the value selected to this select when button clicked... something like this:

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

But nothing happens.

How can I achieve this?

359355 次浏览
小开
最佳答案

这个值被正确地选择了，但是你没有看到它，因为插件隐藏了真正的选择，并且显示了一个带有无序列表的按钮，所以，如果你想让用户看到选择的值，你可以这样做:

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

若要选择多个值，请将这些值作为数组传递。

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

这招对我很管用。

小开

用这个就行了:

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

This is all you need to do. No need to change the generated html of selectpicker directly, just change the hidden select field, and then call the selectpicker('refresh').

小开

A slight variation of Blushrt 的 answer for when you do not have "hard coded" values for options (i.e. 1, 2, 3, 4 etc.)

Let's say you render a <select> with options values being GUIDs of some users. Then you will need to somehow extract the value of the option in order to set it on the <select>.

在下面，我们选择 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>的选择中使用了这个命令。在这种情况下，每个缺省值都没有被选中，但是我们希望第一个项总是被选中。

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

No refresh is needed if the "val"-parameter is used for setting the value, 看小提琴. Use brackets for the value to enable multiple selected values.

$('.selectpicker').selectpicker('val', [1]);
小开 
var bar= $(#foo).find("option:selected").val();
小开

那么，元素的用户 ID

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

实际上您的值已经设置，但是您的选择器没有刷新

正如您可以从文档中读到的
Https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

正确的做法是

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

对于多个值，可以添加值数组

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

“0”是您想要选择的项的值

小开

另一种方法是，使用 this关键字，您可以简单地获取 this中的对象并操作它的值。例如:

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

可以通过调用元素上的 val 方法来设置选定的值。

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

这将在一个多重选择中选择所有项。

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

详情请浏览网页: https://silviomoreto.github.io/bootstrap-select/methods/

小开

Also, you can just call this for multi-value

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

你可在此找到更多资料

小开

Based on @blushrt 's great answer I will update this response. 只是用..

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

如果已经将所需的所有内容预先加载到选择器，则可以正常工作。

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

只要放置选项: 选择获取值，因为引导选择器改变为并以不同的方式出现。但选择仍然有选择

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

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

你可以用 class 或 id 来代替 selector，例如: $('#mySelect').selectpicker('val',your_value)

小开

当您使用 引导选择程序r 时，您应该使用它来获取所选选项的值。

$('#membershipadmin').selectpicker("option:selected").val();
小开 
$('select[name=selValue]').selectpicker('val', '1')

works fine.

但是

var variable = '2'


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

不能在引导程序5中工作。在 BS4中它可以工作。

小开

对我来说，每次都非常有效的方法是下面的(Bootstrap 3.4.1) :

   $("#myDropDown").val(MyDropDownValue).change();

例如:

   $("#ddlSalutations").val(data.SalutationID).change();

这里发布的所有方法都不起作用了，因为在浏览器中总是会出现以下错误。之后肯定发生了什么变化。

Uncaught TypeError: $(...).selectpicker is not a function

希望这能帮到其他为此疯狂的人。

小开

This will not trigger an onChange on picker element (if any):

$(element).val(myVal)
$(element).selectpicker('refresh')

如果变更也将被触发:

$(element).val(myVal)
$(element).selectpicker('refresh').trigger('change') // also trigger 'change'
小开

Not a single one of these solutions helped. In my case, i was using Bootstrap 5.x and v1.14.x of boostrap-select.

为了帮助其他人，解决方案是确保在 bootstrap-select 之前加载 jquery。完成之后，这个就可以了

$('#sel_control').selectpicker('val','1010');
小开

只需在另一个选项之前添加一个选项，这样它就会自动附加

<select name="class" class="form-control selectpicker" data-live-search="true">
<option value="" selected>I am default selected text</option>
<option value="9a">9A</option>
<option value="9b">9B</option>
</select>

注意: 空选项将不被考虑，它将显示从插件中选择的任何内容


提交答案