bootstrap-select下拉框复选-（ajax传值）

最新推荐文章于 2025-06-20 15:24:56 发布

阿允殿下

最新推荐文章于 2025-06-20 15:24:56 发布

阅读量9.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vuejs绑定数据到select中，并同步更新input的值文章标签： ajax请求数据 bootstrap-select

本文链接：https://blog.youkuaiyun.com/qq_21036015/article/details/71171643

本文介绍如何结合Ajax和bootstrap-select插件动态加载并显示数据。通过$.post发送Ajax请求，接收到数据后遍历并拼接成option元素，插入到select标签中。然后使用selectpicker的refresh方法更新下拉框。遇到的问题包括min文件可能导致的效果错误以及vue绑定数据不显示，最终通过原生JavaScript解决并获取多选下拉框的值。

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

一. 描述：在使用bootstrap-select插件的时候，静态写<option>的时候可以正常展示，但是很多时候，我们需要结合上ajax。很多人在结合上ajax的时候，就出现了各种问题，本文章就是针对遇到问题的学习者，进行整理处理的。代码下载https://pan.baidu.com/s/1hsmRE88

二. 先贴上代码吧

 rel="stylesheet" type="text/css" href="bootstrap-select.css"> href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>


 
 
 三. 代码说明
 0. 注意，引入的所有文件路径要保持正确，我在引入的时候，引入bootstrap-select.min.css或者.min.js文件的时候，效果出错，保险起见，不要引入min类的bootstrap-select
 <link re

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿允殿下

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

bootstrap获取下拉框数据_bootstrap select2 动态从后台Ajax动态获取数据的代码

weixin_30324103的博客

12-28

1037

效果图展示：实现方式：前端代码：动态多选type="text" multiple data-live-search="true" >.....var url = ctx + "demo/form/select2";console.log(url)$(function() {var selectedvalues = [];$("#bsselect2id:selected").each(func...

bootstrap select2插件用ajax来获取和显示数据的实例

12-29

用select2插件，实现以下这个选择框： 1、html代码 <div class=form-group xss=removed id='preParamGroup'> <label for=inputEmail3 class=col-sm-2>预定义参数</label> <div class=col-sm-8> <select class=js-states form-control id=preParamDefine multiple=multiple style=width: 100%></sel

参与评论您还未登录，请先登录后发表或查看评论

bootstrap select插件的使用，及其ajax传值插入select的option

ke1ying的博客

08-26

1025

首先需要导入bootstrap.css 和 bootstrap.js之后再倒入bootstrap-select.css和bootstrap-select.js： <link type="text/css" rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> &l...

Bootstrap多选下拉框实现指南

最新发布

weixin_42593549的博客

06-20

683

Bootstrap 是一个流行的前端开发框架，它由 Twitter 创建并开源，用于快速开发响应式和移动优先的 Web 项目。通过其丰富的组件库和网格系统，Bootstrap 为开发者提供了一套简单而强大的工具，以创建统一且一致的用户体验。在本章中，我们将简要介绍 Bootstrap 框架的核心组件，包括其 CSS 和 JavaScript 组件，并探讨框架的基本结构及其对现代 Web 开发的影响。

bootstrap-select 插件ajax动态添加选项

qq_37604446的博客

05-25

1630

function getExam() { var selectNianji = document.getElementById("nianji").value; var selectXueqi = document.getElementById("xueqi").value; if(selectNianji == "选择年级" || selectNianji == null) {...

下拉选框Ajax传值,jQuery easyui 绑定下拉框控件从数据库获取数据 MVC controller传值过去...

weixin_30709043的博客

08-05

339

这是在做OA系统的时候，需要用到的一个小功能，比较通用的，因为本人也是才接触easyui不久，希望有错的地方大家指出来，谢谢//界面用的easyui-combobox服务合同编号://js$(function(){//转到后台，查询出数据，将数据绑定ajaxHelper(‘/LabContract/Select_ConId‘,‘GET‘,null).done(function(dt){$(‘#...

bootstrap select2插件用ajax来获取和显示数据

云中不知人的专栏

08-31

9246

用select2插件，实现以下这个选择框： 1、html代码预定义参数 2、js代码 $("#preParamDefine").select2({ //data: data, placeholder:'请选择',//默认文字提示 tags: true,//允许手动添加 allowClear: true,//允许清空

bootstrap-select下拉框

08-11

Bootstrap Select是一款基于Bootstrap框架的下拉框插件，它扩展了HTML `<select>`元素，提供了丰富的功能和定制选项，使得下拉菜单在视觉效果和用户体验上都有显著提升。这款插件广泛应用于网页开发中，特别是在需要...

基于Bootstrap下拉框插件bootstrap-select使用方法详解

10-18

或者，如果使用Ajax从服务器请求数据，可以利用bootstrap-select的API来动态更新选项。例如： ```javascript $('#sel_role').selectpicker('refresh'); ``` 这个方法可以用来在选项改变后重新渲染下拉框。 ...

bootstrap可编辑下拉框jquery.editable-select

10-19

Bootstrap可编辑下拉框jQuery.editable-select是一款增强型的下拉选择组件，它允许用户在下拉列表中直接编辑文本，并提供了丰富的自定义选项。这个组件基于流行的前端框架Bootstrap和JavaScript库jQuery，使得在Web...

Bootstrap-select下拉框搜索功能实例教程

一个基本的bootstrap-select下拉框实例可以包含如下元素： - `select`元素：这是下拉菜单的核心，其中可以包含多个`option`元素。 - `data-live-search`属性：该属性可以让下拉菜单支持搜索功能，用户输入搜索词后...

bootstrap select2 动态从后台Ajax动态获取数据的代码

10-15

主要介绍了bootstrap select2 动态从后台Ajax动态获取数据的代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

bootstrap 下拉多选框进行多选传值问题代码分析

12-10

项目开发遇到个问题，就是引入bootstrap下拉多选框进行多选的时候，用form表单提交到后台，获取不到多选的值，只能获取的选择的第一个值。纠结了会。 jsp页面需要引入这东东~ <link rel="stylesheet" href="${ctx}/js/selectbootstrap/dist/css/bootstrap-select.min.css" rel="external nofollow" > [removed][removed] 直接上代码~

Bootstrap-select2 ajax动态取值赋值

m0_37639018的博客

04-26

3369

最近接手了一个bootstrap框架的项目，下拉列表采用的select2，对于select说好处是支持搜索、多选，但是取值、赋值就麻烦许多了。直接上代码 $('#id’).select2({ dropdownParent: $("#parent"), width:200, allowClear: true, placeholder : "请选择", aj...

运用Ajax通过select下拉框能得到数据

千山鸟飞绝的专栏

08-10

6914

大伙应该在开发中遇到过这种情况，就是通过下拉框选择要显示的内容。如下图所示：在没用到ajax技术时，我们可以使用两种方法来解决，一种就是选择后再次获得下拉框的数据，和显示的数据一起反映在页面上，这是最笨的方法，因为你选择多少次，下拉框的数据就要从数据库重复读取多少次。另外一种方法就是将页面分两桢，上桢是下拉框，下桢就是要读取的内容。这样做比第一种方法进步了不少，但是分桢对页面控制又有

select2ajax显示,bootstrap select2插件用ajax来获取和显示数据的实例

weixin_28879085的博客

08-05

401

bootstrap select2插件用ajax来获取和显示数据的实例2019-01-08编程之家https://www.jb51.cc用select2插件，实现以下这个选择框：2、js代码文字提示tags: true,//允许手动添加allowClear: true,//允许清空ajax: {url: '/jgwork/param_select',type:'GET',dataType: 'js...

bootstrap-select2 ajax将模糊匹配修改为实时搜索

weixin_41505223的博客

03-13

1444

近几天要写一个用户可以实时搜索数据的下拉框，就搜到了bootstrap的一个插件，我具体实现的功能是：下拉框显示的内容根据用户的搜索词实时(ajax)发生变化首先官方文档大家可以参考一下，里面有很多基础的东西，具体大家可根据实际情况结合使用 https://select2.org/ 前段代码： #这里引用官方文档提供的js ,css #这里设置长度大有用处 var mylength=0 /...

使用bootstrap-select多选下拉框和ajax请求到的数据添加到下拉框

C_william的博客

11-03

4749

首先讲下用法：引入css文件：引入js文件： //依赖JQ环境 //使用显示中文字体的js 开始使用：最关键的就是class="selectpicker"和实现多选的multiple，其他都是锦上添花。另外lay-xxx是关于集合layui框架使用的，可以无视。最后ajax请求回来的数据添加到下拉框需要： $('#package