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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
php实现简单文件下载的方法
2015/01/30 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
不安全的常用的js写法
2009/09/15 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
Python中title()方法的使用简介
2015/05/20 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python 专题一 函数的基础知识
2017/03/16 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python中JWT用户认证的实现
2020/05/18 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
中班中秋节活动反思
2014/02/18 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
出国导师推荐信
2015/03/25 职场文书
会议主持词结束语
2015/07/03 职场文书
高三生物教学反思
2016/02/22 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Android Studio 计算器开发
2022/05/20 Java/Android