selectpicker的使用方法

使用方法

---

$('.selectpicker')泛指select的jq对象

.selectpicker('val')

获取select框中所有选中的值

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

新方当使用第二个参数时可以将 value为所输入的值的选项框默认选中

这与直接在select元素上调用val()不同。 如果直接调用元素的val() ，则引导选择ui不会刷新（因为更改事件仅从用户交互中触发）。 你将不得不自己调用ui刷新方法。

 $('.selectpicker').val('Mustard'); $('.selectpicker').selectpicker('render'); // this is the equivalent of the above $('.selectpicker').selectpicker('val', 'Mustard'); 

---

.selectpicker('selectAll')

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

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

---

.selectpicker('deselectAll')

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

 $('.selectpicker').selectpicker('deselectAll'); 

---

.selectpicker('render')

您可以使用render方法强制重新渲染引导程序 - 选择ui。 如果您以编程方式更改影响元素布局的任何基础值，这非常有用。

 $('.selectpicker').selectpicker('render'); 

---

.selectpicker('mobile')

通过调用$('.selectpicker').selectpicker('mobile')启用移动滚动功能。 这使设备的原生菜单可用于选择菜单。

用于检测浏览器的方法留给用户。

 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { $('.selectpicker').selectpicker('mobile'); } 

---

.selectpicker('setStyle')

修改与按钮本身或其容器关联的类。

如果更改容器上的类：

 $('.selectpicker').addClass('col-lg-12').selectpicker('setStyle'); 

如果更改按钮上的类（改变数据样式）：

 // Replace Class $('.selectpicker').selectpicker('setStyle', 'btn-danger'); // Add Class $('.selectpicker').selectpicker('setStyle', 'btn-large', 'add'); // Remove Class $('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove'); 

---

.selectpicker('refresh')

要以编程方式更新JavaScript的选择，首先操作选择，然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

 $('.selectpicker').selectpicker('refresh'); 

芥末 芥末番茄酱滋味

删除芥末 去除番茄酱 删除可口

 <select class="selectpicker remove-example"> <option value="Mustard">Mustard</option> <option value="Ketchup">Ketchup</option> <option value="Relish">Relish</option> </select> <button class="btn btn-warning rm-mustard">Remove Mustard</button> <button class="btn btn-danger rm-ketchup">Remove Ketchup</button> <button class="btn btn-success rm-relish">Remove Relish</button> 

 $('.rm-mustard').click(function () { $('.remove-example').find('[value=Mustard]').remove(); $('.remove-example').selectpicker('refresh'); }); 

芥末 芥末番茄酱滋味

 禁用  启用

 $('.ex-disable').click(function () { $('.disable-example').prop('disabled', true); $('.disable-example').selectpicker('refresh'); }); $('.ex-enable').click(function () { $('.disable-example').prop('disabled', false); $('.disable-example').selectpicker('refresh'); }); 

---

.selectpicker('toggle')

以编程方式切换开启/关闭引导程序选择菜单。

 $('.selectpicker').selectpicker('toggle'); 

---

.selectpicker('hide')

要以编程方式隐藏引导选择，请使用hide方法（这只会影响引导选择本身的可见性）。

 $('.selectpicker').selectpicker('hide'); 

---

.selectpicker('show')

要以编程方式显示bootstrap-select，请使用show方法（这只会影响引导程序选择本身的可见性）。

 $('.selectpicker').selectpicker('show'); 

---

.selectpicker('destroy')

要以编程方式销毁引导选择，请使用destroy方法。

 $('.selectpicker').selectpicker('destroy');