选择插件:取消选择问题

Bootstrap Select plugin: deselect issue

本文关键字：选择 问题 取消 插件      更新时间：2023-09-26

我使用Bootstrap框架与Bootstrap选择插件。

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

<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()函数只是打印带有MySQLi数据库值的<option>标签。

当我第一次单击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>

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

<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使用这个技巧来添加取消选择的简单值选项。

好运

相关文章：