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 相关文章推荐
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
Feb 13 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
Js apply方法详解
Feb 16 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
js实现车辆管理系统
Aug 26 Javascript
vue $mount 和 el的区别说明
Sep 11 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长字符串定义方法
2012/07/12 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php fread读取文件注意事项
2016/09/24 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PDO::rollBack讲解
2019/01/29 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python中偏函数用法示例
2018/06/07 Python
python读取与处理netcdf数据方式
2020/02/14 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
2014年保育员个人工作总结
2014/12/02 职场文书
企业法人代表证明书
2015/06/18 职场文书
晚会开幕词范文
2016/03/04 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
零基础学java之循环语句的使用
2022/04/10 Java/Android