下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...

今天收到了客户的需求，要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上。保存的时候按照停车场ID进行保存。

自己首先把后台的部分写完了，测试了接口数据。成功的拿到了ajax数据。

接下来，自己用了select下拉标签和js函数进行填充后台传过来的数据。

经过自己的不断百度和参考别人的博客，试了很多次终于成功的调试出了想要的结果。特来博客记录一下，也分享一下开心的心情。

（一）首先引入样式和JS文件

　　样式文件和JS下载放到本地最好，因为放到本地自己可以修改一些东西。

　　在head中引入css样式文件

 <link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css" rel="stylesheet">
 <link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css" rel="stylesheet">

　　在script上方引入js文件

<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
<script th:src="@{/js/jquery.min.js}"></script>      　　//jquery应该每个项目都引入了，这是我本地的路径，如果项目中没有引入，自己按照自己的路径修改

（二）撰写HTML

　　这里面的内容是从数据库获取出来的

<select id="parkID" name="parkID" class="selectpicker bla bla bli"  type="text" multiple data-live-search="true" ></select>

（三）写js函数

　　　　　$(function() {$(".selectpicker").selectpicker({noneSelectedText : '请选择'    //默认显示内容
            });loadParkdata();    //执行此函数，从后台获取数据，拼接成option标签，添加到select的里面//初始化刷新数据$(window).on('load', function() {$('.selectpicker').selectpicker('refresh');});});function loadParkdata(){$.ajax({url : "/module/parkmonthlyrent/listpark",    //后台controller中的请求路径type : 'GET',async : false,datatype : 'json',success : function(data) {if(data){var parknames =[];for(var i=0,len=data.length;i<len;i++){var parkdata = data[i];　　　　　　　　　　　　　　　　　//拼接成多个<option><option/>　　　　　　　　　　　　　　　　　parknames.push('<option value="'+parkdata.parkID+'">'+parkdata.channelID+'</option>')

                       }$("#parkID").html(parknames.join(' '));    //根据parkID(根据你自己的ID写)填充到select标签中}},error : function() {alert('查询停车场名称出错');}});}

（四）效果展示

　　 模糊搜索

　　　　　　希望接下来的日子一切顺利。

转载于:https://www.cnblogs.com/misscai/p/10886853.html

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...相关推荐

jquery-1.11.1.min.js文件（下拉选带搜索）
/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ ! function (a, b ...
element-ui 下拉菜单带搜索框示例（亲测可用）
转载自:https://blog.csdn.net/wangchaohpu/article/details/106021791 1.举例组件代码 <template><div cla ...
Select下拉框支持搜索，jq插件，使用超级简单！
Select搜索下拉框 1.引入下拉框搜索所需js文件和css文件: 下载地址(免费):中文搜索下载 <%--下拉框支持搜索--%><script type="text/j ...
web前端设计与开发期末作品: 服装主题网页设计——女装下拉菜单带特效 (11页) HTML+CSS+JavaScript 网页设计期末作业个人主页...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装)
Java EXCEL 表格导入导出(带下拉选-带VLOOKUP函数封装) 对于excel Java POI 使用目前简单导出导入功能网上很多,但是对于有下拉选,样式等缺点却是最大硬伤,故此封装一个通 ...
css下拉框带三角符号_创建带有符号的下拉列表
css下拉框带三角符号 To make data entry easier, you can create a drop down list in an Excel cell, using data ...
HTML -- HTML文本框、单选框、多选框、按钮、文本域、文件域、下拉框、搜索框滑动和简单验证
1. HTML文本框.单选框.多选框.按钮.文本域.文件域.下拉框.搜索框滑动和简单验证 1.1 表单元素格式 placeholder 提示文本. 示例: <!DOCTYPE html> ...
Element下拉框自定义搜索方法
Element下拉框自定义搜索方法根据官方文档的api,自定义element的select组件输入提示需要配置filter-method(自定义搜索方法)和filterable(是否可搜索),htm ...
WPF实现下拉框带图文和水印
WPF开发者QQ群: 340500857 有小伙伴需要实现ComboBox下拉框带水印,并且选择Item内容后水印默认从中间到顶部.Item需要展示图文,选择后的数据展示图文. 欢迎转发.分享.点赞, ...

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...相关推荐

最新文章

热门文章

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解...

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中 用法详解...相关推荐

最新文章

热门文章

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...

下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...相关推荐