Bootstrap-select下拉多选框+选中项添加radio单选按钮组

最新推荐文章于 2024-03-21 16:46:29 发布

元周的奇妙飞行迹

最新推荐文章于 2024-03-21 16:46:29 发布

阅读量4.4k

点赞数 1

分类专栏：前端文章标签： bootstrap html css javascript jquery

本文链接：https://blog.youkuaiyun.com/ycsss/article/details/120390929

版权

本文介绍了如何使用Bootstrap-select插件将下拉单选框改造成下拉多选框，并解决显示错误、宽度问题以及在选中项过多时的布局问题。同时，文章详细讲解了如何将选中项转换为radio单选按钮组，并处理了去重和输入项插入的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述

工作中遇到的需求，需要将下拉单选框改成下拉多选框，因此使用Bootstrap-select插件完成。这个下拉单选框可以通过按钮切换为输入框，选中项或输入项都添加为radio单选按钮。过程中遇到了以下问题。

Bootstrap-select显示出错，总是显示两个下拉多选框
Bootstrap-select宽度width问题
radio单选按钮组去重

二、具体实现

1. 下载Bootstrap-select及汉化插件并引入

Bootstrap-select中文网：https://www.bootstrapselect.cn/
Github地址： https://github.com/silviomoreto/bootstrap-select

引入：

<link href="static/bootstrap4/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="static/bootstrap4/css/bootstrap-select.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="static/bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/defaults-zh_CN.js"></script>

2. bootstrap-select下拉多选实现

HTML

主要是在select标签加上class="selectpicker"和multiple。

<div class="row" id="answer_part_div">
	<div class="col-sm-10" id="answer_select_div">
        <label for="answer_select"></label>
        <select class="selectpicker" multiple required id="answer_select"