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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
webstorm+vue初始化项目的方法
Oct 18 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/12/10 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
pandas计数 value_counts()的使用
2019/06/24 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
美术指导助理求职信
2014/04/20 职场文书
篮球社团活动总结
2014/06/27 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
转变工作作风心得体会
2016/01/23 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书