jQuery 如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14804253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set selected value on select using selectpicker plugin from bootstrap
提问by jcvegan
I'm using the Bootstrap-Selectplugin like this:
我正在使用这样的Bootstrap-Select插件：
HTML:
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:
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?
我怎样才能做到这一点？
回答by Tom Sarduy
The value is correctly selected, but you didn't see it because the plugin hide the real select and show a button with an unordered list, so, if you want that the user see the selected value on the select you can do something like this:
该值已正确选择，但您没有看到它，因为插件隐藏了真正的选择并显示了一个带有无序列表的按钮，因此，如果您希望用户在选择上看到所选值，您可以执行以下操作：
//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:
编辑：
Like @blushrt points out, a better solution is:
就像@blushrt 指出的那样，更好的解决方案是：
$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')
Edit 2:
编辑2：
To select multiple values, pass the values as an array.
要选择多个值，请将值作为数组传递。
回答by blushrt
$('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').
这就是您需要做的全部。无需直接更改selectpicker生成的html，只需更改隐藏的select字段，然后调用selectpicker('refresh')即可。
回答by Jesterhead
$('.selectpicker').selectpicker('val', YOUR_VALUE);
回答by cederlof
No refresh is needed if the "val"-parameter is used for setting the value, see fiddle. Use brackets for the value to enable multiple selected values.
如果“val”参数用于设置值，则不需要刷新，请参阅 fiddle。对值使用括号以启用多个选定值。
$('.selectpicker').selectpicker('val', [1]);
回答by Janith Widarshana
$('#mybutton').click(function(){
$('select[name=selValue]').val(1);
$('select[name=selValue]').change();
});
This worked for me.
这对我有用。
回答by Hillar Kapsta
Actually your value is set, but your selectpicker is not refreshed
实际上您的值已设置，但您的选择器未刷新
As you can read from documentation
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval
正如您可以从文档https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval 中阅读的那样
The right way to do this would be
这样做的正确方法是
$('.selectpicker').selectpicker('val', 1);
For multiple values you can add array of values
对于多个值，您可以添加值数组
$('.selectpicker').selectpicker('val', [1 , 2]);
回答by Awanish Kumar
You can set the selected value by calling the val method on the element.
您可以通过调用元素上的 val 方法来设置选定的值。
$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);
This will select all items in a multi-select.
这将选择多选中的所有项目。
$('.selectpicker').selectpicker('selectAll');
details are available on site : https://silviomoreto.github.io/bootstrap-select/methods/
详细信息可在现场获得：https: //silviomoreto.github.io/bootstrap-select/methods/
回答by abdul
var bar= $(#foo).find("option:selected").val();
回答by Kristian Vinther
A slight variation of blushrt'sanswer for when you do not have "hard coded" values for options (i.e. 1, 2, 3, 4 etc.)
当您没有选项的“硬编码”值（即 1、2、3、4 等）时，blushrt 的答案略有变化
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>选项值为某些用户的 GUID。然后，您需要以某种方式提取选项的值，以便将其设置在<select>.
In the following we select the first option of the select.
下面我们选择select的第一个选项。
HTML:
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:
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');
We used this in a select with the multiple keyword <select multiple>. In this case nothing is selected per default, but we wanted the first item to always be selected.
我们在带有 multiple 关键字的选择中使用了它<select multiple>。在这种情况下，默认情况下没有选择任何内容，但我们希望始终选择第一个项目。
回答by Abd Abughazaleh
$('.selectpicker').selectpicker("val", "value");
