如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值

Posted 2023-03-05

【中文标题】如何使用 bootstrap 中的 selectpicker 插件在选择时设置选定值

【英文标题】：How to set selected value on select using selectpicker plugin from bootstrap

【发布时间】：2013-01-26 02:08:18

【问题描述】：

我正在像这样使用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);
);

但是什么也没发生。

我怎样才能做到这一点？

【问题讨论】：

我不确定你想达到什么目的，一旦用户在选择中单击该选项，就会设置该值

是的，因为该值确实来自 ajax 调用中的方法...

该值被正确选择了，但是你没有看到它，因为插件隐藏了真正的选择并显示了一个带有无序列表的按钮

是的，我知道，但是如何修复它...我的意思是...用户必须看到此控件上的选择

【参考方案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'); 这样你只是改变隐藏的选择，调用 selectpicker('refresh') 重绘按钮。

是的，这种方式更好@blushrt，添加到我的答案中

我面临同样的问题，我无法选择用户已选择的预选值。

之后是否需要刷新selectpicker？？ @TomSarduy

@ankitsuthar，是的

【参考方案2】：

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

这就是你需要做的。不需要直接修改selectpicker生成的html，只需要修改隐藏的select字段，然后调用selectpicker('refresh')即可。

【讨论】：

这应该是正确答案！调用 .selectpicker('refresh') 命令对于选择和更新 selectpicker 驱动的下拉列表的当前值至关重要。请注意，对所有 .selectpicker 元素调用刷新可能会很慢。如果您知道要操作的对象 - 它首选在该单个选择列表上调用刷新。

$('.selectpicker').selectpicker('refresh'); 如果您在一页上有很多选择器，可能会影响您的性能

我发现的另一个问题是，这不会勾选选择。

【参考方案3】：

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

【讨论】：

我已经尝试过您的解决方案.. 但它在我的选择中显示“未选择任何内容”，尽管我选择了值并且我从存储数据的资源中获得了相同的值。

【参考方案4】：

如果“val”参数用于设置值see fiddle，则不需要刷新。为值使用括号以启用多个选定值。

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

【参考方案5】：

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

这对我有用。

【参考方案6】：

其实你的值已经设置好了，但是你的selectpicker没有刷新

您可以从文档中看到 https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval

正确的做法是

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

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

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

【参考方案7】：

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

代替选择器，您可以为您提供选择器类或 ID，例如：$('#mySelect').selectpicker('val',your_value)

【参考方案8】：

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

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

这将选择多选中的所有项目。

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

详情请见现场：https://silviomoreto.github.io/bootstrap-select/methods/

【讨论】：

我已经尝试了您的解决方案.. 但它在我的选择中显示“未选择任何内容”，尽管我选择了值并且我从存储数据的资源中获得了相同的值。

【参考方案9】：

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

【讨论】：

Abd，我有将 json 格式传递给 ajax 的 php 脚本，其中 json 格式是这样的："car":"8","colors":"red,blue,white" 。在这种情况下，如何使用此方法 $('.selectpicker').selectpicker("val", "data.colors"); 将对象“颜色”插入到 selectpicker 中检查？

【参考方案10】：

当您没有“硬编码”选项值（即 1、2、3、4 等）时，blushrt 的答案略有不同

假设您渲染了一个<select>，其中选项值是某些用户的 GUID。然后，您需要以某种方式提取选项的值，以便在 <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> 的选择中使用了它。在这种情况下，默认情况下没有选择任何内容，但我们希望始终选择第一项。

【参考方案11】：

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

【参考方案12】：

根据@blushrt 的出色回答，我将更新此回复。 只是使用 -

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

如果您已将所需的所有内容预加载到选择器中，则可以使用。

【参考方案13】：

当您使用 Bootstrap Selectpicker 时，您应该使用它来获取所选选项的值。

$('#membershipadmin').selectpicker("option:selected").val();

【参考方案14】：

另外，你可以把它称为多值

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

你可以在这里找到更多https://developer.snapappointments.com/bootstrap-select/methods/

【参考方案15】：

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

只需放 option:selected 即可获取值，因为引导选择选择器更改为并以不同的方式显示。但是select还是有选择的

【参考方案16】：

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

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

【参考方案17】：

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

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

【参考方案18】：

元素的用户 ID，然后

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

【参考方案19】：

使用它，它会起作用的：

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