javascript - Bootstrap选择插件: deselect issue

Question

我正在将 Bootstrap 框架与 Bootstrap Select 一起使用插件。

这是一个常规的选择标签，不是多个，这是我使用的代码:

<select class="selectpicker show-tick" name="main_course_select" id="main_course_select" title="main" data-style="btn-primary" data-width="100%">
    <?php echo get_food($mysqli,'main'); ?>
</select>

哪里get_food()函数简单地打印 <option>带有来自 MySQLi 数据库的值的标签。

当我第一次点击 option 时我可以看到它被勾选了，当我再次单击相同的选项时，我希望取消选择该选项，为什么这不是默认功能超出了我的范围，我不喜欢使用多重选择来实现此目的。有人知道如何完成这项工作吗？

这是重现的问题:

$(document).ready(function() {
	$('.selectpicker').selectpicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.css">

<select class="selectpicker show-tick" name="main_course_select" id="main_course_select" title="main" data-style="btn-primary" data-width="100%">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Answer 1

取消选择的唯一方法是在第一个节点添加一个空选项。

<select class="selectpicker show-tick" name="main_course_select" id="main_course_select" title="main" data-style="btn-primary" data-width="100%">
    <option></option>
    <?php echo get_food($mysqli,'main'); ?>
</select>

通过选择空选项，您将取消选择最后一个选择。一些插件，例如 jquery selected 或 jquery select2 会使用此技巧来添加取消选择简单值选项。

祝你好运