bootstrap里bootstrap动态加载下拉框的实例讲解


Posted in Javascript onAugust 10, 2018

实例如下所示:

//引入的包
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap-select.css" rel="external nofollow" />
<script type="text/javascript" src="map/plug-in/scripts/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="map/plug-in/scripts/bootstrap/bootstrap-select.js"></script>


//下拉框(代码)
function getLayerLoad(tcId){
$.ajax({ 
url:layerSelUrl,
 dataType:'jsonp',
 data:'',
 jsonp:'callback',
 async:false,
 jsonpCallback:"success_jsonpCallback",
 success:function(data){
 $("#"+tcId).empty();
 $("#"+tcId).append("<option>---请选择---</option>");
 $.each(data.bussinessTypes,function(i,o){
 var opt="";
 if(o.url){
 opt+='<option url='+o.url+'>'+i+'</option>';
 
 }else{
 opt+='<option url="">'+i+'</option>';
 }
 $("#"+tcId).append(opt);
 });
 $("#"+tcId).selectpicker('refresh');//动态加载
 },error:function(){
 }
});
}

<select class="selectpicker" id="selectpickers">
<option>---请选择---</option>
</select>

以上这篇bootstrap里bootstrap动态加载下拉框的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
bootstrap下拉框动态赋值方法
Aug 10 #Javascript
layui实现点击按钮给table添加一行
Aug 10 #Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 #Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 #Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 #Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 #Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 #Javascript
You might like
php实现下载限制速度示例分享
2014/02/13 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
vue axios用法教程详解
2017/07/23 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
vue ssr 指南详读
2018/06/29 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
python实现划词翻译
2020/04/23 Python
使用python加密自己的密码
2015/08/04 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
深入理解Django的中间件middleware
2018/03/14 Python
python list转置和前后反转的例子
2019/08/26 Python
Python上下文管理器全实例详解
2019/11/12 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
追悼会上的答谢词
2014/01/10 职场文书
班班通项目实施方案
2014/02/25 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
2014年党支部承诺书
2014/05/30 职场文书
爬山的活动方案
2014/08/16 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
2015年环卫工作总结
2015/04/28 职场文书
搭讪开场白台词大全
2015/05/28 职场文书