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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 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
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
PHP运行模式汇总
2016/11/06 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JS动画效果代码3
2008/04/03 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
vue实现跨域的方法分析
2019/05/21 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Python写的服务监控程序实例
2015/01/31 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
汇科协同Java笔试题
2012/03/31 面试题
人力资源经理自我评价
2014/01/04 职场文书
小学生环保标语
2014/06/13 职场文书
教师节慰问信
2015/02/15 职场文书
加入学生会自荐书
2015/03/05 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
python实现简单聊天功能
2021/07/07 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS