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 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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 程序员应该使用的10个组件
2009/10/31 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
express.js中间件说明详解
2019/03/19 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python实现udp聊天窗口
2020/03/31 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
.net开发工程师面试题
2014/02/25 面试题
大学生简短的自我评价
2014/09/12 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
求职自荐信怎么写
2015/03/04 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
python周期任务调度工具Schedule使用详解
2021/11/23 Python