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 event flow 的一个bug详解
Sep 17 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
Vue刷新修改页面中数据的方法
Sep 16 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
图解javascript作用域链
May 27 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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重定向的3种方式
2013/03/07 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python如何在bool函数中取值
2020/09/21 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
《理想》教学反思
2014/02/17 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
规范化管理年活动总结
2014/08/29 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
导游词之山东孔庙
2019/11/04 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
一篇文章带你复习java知识点
2021/06/28 Java/Android
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技