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 命名规则 变量命名规则
Feb 25 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
jQuery.extend 函数详解
Feb 03 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php数组应用之比较两个时间的相减排序
2008/08/18 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python七夕浪漫表白源码
2019/04/05 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
为什么python比较流行
2020/06/19 Python
Python hashlib模块的使用示例
2020/10/09 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
2014年幼儿园教研工作总结
2014/12/04 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
暂住证明怎么写
2015/06/19 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript
python开发制作好看的时钟效果
2022/05/02 Python
netty 实现tomcat的示例代码
2022/06/05 Servers