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 document.referrer 用法
Apr 30 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Javascript window对象详解
Nov 12 Javascript
详解javascript数组去重问题
Nov 06 Javascript
canvas的神奇用法
Feb 03 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python类属性的延迟计算
2016/10/22 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python实现简单日期工具类
2019/04/24 Python
区分python中的进程与线程
2020/08/13 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
PHP面试题附答案
2015/11/28 面试题
实习鉴定范文
2013/12/19 职场文书
新三好学生主要事迹
2014/01/23 职场文书
团队激励口号
2014/06/06 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
五好家庭事迹材料
2014/12/20 职场文书
环保守法证明
2015/06/24 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis