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当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
javascript判断office版本示例
Apr 11 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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下10件你也许并不了解的事情
2008/09/11 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python编程实现蚁群算法详解
2017/11/13 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
20岁生日感言
2014/01/13 职场文书
主管会计岗位责任制
2014/02/10 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
2019各种承诺书范文
2019/06/24 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android