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图片预加载技术(详细演示)
Mar 12 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
微信小程序input抖动问题的修复方法
Mar 03 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 一个随机字符串生成代码
2010/05/26 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php socket通信简单实现
2016/11/18 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python爬取网页信息的示例
2020/09/24 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Python可以用来做什么
2020/11/23 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
IT工程师岗位职责
2014/07/04 职场文书
日语系毕业求职信
2014/07/27 职场文书
房产公证书格式
2015/01/26 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android