在选择任何其他选项引导程序时取消选择默认选择

时间:2017-07-31 09:52:02

标签: javascript jquery twitter-bootstrap bootstrap-select bootstrap-selectpicker

我正在使用Bootstrap-select插件(https://silviomoreto.github.io/bootstrap-select/)作为我的下拉列表选择框。

我启用了默认选项,在页面加载时勾选了该选项。图片

enter image description here

<select id="dataPicker" class="selectpicker" multiple>
	<optgroup  >
		<option value="default" selected="selected">ALL</option>
	</optgroup>
	<optgroup ">
		<option value="failed">FAILED</option>
		<option value="running">RUNNING</option>
		<option value="completed">COMPLETED</option>
	</optgroup>
</select>

在上面的代码中,默认选择“ALL”。

我正在寻找一种行为,当用户选择“ALL”以外的任何选项时,“ALL”会自动取消选择。

请帮忙。

2 个答案:

答案 0 :(得分:0)

添加&#39; data-actions-box =&#34; true&#34;&#39;到你的选择元素。

<select class="selectpicker" multiple data-actions-box="true">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
</select>

https://silviomoreto.github.io/bootstrap-select/examples/#selectdeselect-all-options

如果您想通过您的方法继续,那么您需要在选择项目事件上添加一个事件挂钩,并检查该项目是否为“全部”项目。项目并手动取消选择列表中的所有项目,反之亦然。

https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerselectall

答案 1 :(得分:0)

如果这可以帮助某人,答案可能是jquery

$(document).on('change', '#dataPicker', function (e)
{
var select = $(this)[0];

if (select[0].selected) {

    $("#dataPicker").val([]).val('default').selectpicker("refresh");

}
});