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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
原生js简单实现放大镜特效
May 16 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
Node 代理访问的实现
Sep 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
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
为python设置socket代理的方法
2015/01/14 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python 专题四 文件基础知识
2017/03/20 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python tkinter和exe打包的方法
2020/02/05 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
css3 transform属性详解
2014/09/30 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
班队活动设计方案
2014/01/30 职场文书
光盘行动倡议书
2014/02/02 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
学校清明节活动总结
2014/07/04 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书