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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
javascript学习之json入门
Dec 22 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
Vue实现按钮级权限方案
Nov 21 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
2006/12/14 PHP
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
js实现随机点名程序
2020/09/17 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
图解Python变量与赋值
2018/04/03 Python
Python格式化输出%s和%d
2018/05/07 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python实现一个优先级队列的方法
2020/07/31 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
三个Unix的命令面试题
2015/04/12 面试题
校本教研工作制度
2014/01/22 职场文书
运动会邀请函范文
2014/02/06 职场文书
新闻发布会策划方案
2014/06/12 职场文书
公司员工管理制度
2015/08/04 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android