Bootstrap select下拉联动(jQuery cxselect)


Posted in Javascript onJanuary 04, 2017

下拉select选项多级联动实例。

Bootstrap select下拉联动(jQuery cxselect)

cxselect插件使用方法:

1. 引入JS,
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery.cxselect.min.js"></script> 

2. JS项设置。Find more here:http://code.ciaoca.com/jquery/cxselect/

<script>$('#cnMap').cxSelect({ 
 url: 'js/cityData.min.json', 
 //url: 'js/cityData.min.json', 
 selects: ['province', 'city', 'region'], 
 nodata: 'none' 
}); 
 
$('#globalMap').cxSelect({ 
 url: 'js/globalData.min.json', 
 selects: ['country', 'state', 'city', 'region'], 
 nodata: 'none' 
}); 
</script>

实例源码:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <!-- 
 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 
 --> 
 <meta name="Generator" content="EditPlus®"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> 
 <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> 
 <!--[if lt IE 9]> 
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
 <![endif]--> 
 <title>UnionSelect</title> 
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
</head> 
<body> 
<h1 align="center">下拉联动</h1> 
<div id="" class="container"> 
 <form method="post" action="" class="form-horizontal" role="form"> 
 
 <div class="form-group" id="cnMap"> 
 <label for="firstname" class="col-sm-3 control-label">全国<small> (省、市、县三级;包括提交表单的验证。)</small></label> 
 <div class="col-sm-3"> 
 <select name="province" class="province form-control" disabled="disabled" data-first-title="选择省份"></select> 
 </div> 
 <div class="col-sm-3"> 
 <select name="city" class="city form-control" disabled="disabled"></select> 
 </div> 
 <div class="col-sm-3"> 
 <select name="region" class="region form-control" disabled="disabled"></select> 
 </div> 
 </div> 
 
 <hr /> 
 
 <div class="form-group" id="globalMap"> 
 <label for="firstname" class="col-sm-4 control-label">全球<small> (国、省、市、县三级;未做表单验证。)</small></label> 
 <div class="col-sm-2"> 
 <select name="country" class="country form-control" disabled="disabled" data-first-title="选择国家"></select> 
 </div> 
 <div class="col-sm-2"> 
 <select name="state" class="state form-control" disabled="disabled"></select> 
 </div> 
 <div class="col-sm-2"> 
 <select name="city" class="city form-control" disabled="disabled"></select> 
 </div> 
 <div class="col-sm-2"> 
 <select name="region" class="region form-control" disabled="disabled"></select> 
 </div> 
 </div> 
 
<!-- 
 <h2>全国</h2> 
 <div id="cnMap"> 
 <select name="province" class="province" disabled="disabled" data-first-title="选择省份"></select> 
 <select name="city" class="city" disabled="disabled"></select> 
 <select name="region" class="region" disabled="disabled"></select> 
 </div> 
 
 <h2>全球</h2> 
 <div id="globalMap"> 
 <select name="country" class="country" disabled="disabled" data-first-title="选择国家"></select> 
 <select name="state" class="state" disabled="disabled"></select> 
 <select name="city" class="city" disabled="disabled"></select> 
 <select name="region" class="region" disabled="disabled"></select> 
 </div> 
--> 
 <br /> 
 <button id="subBut" type="submit" class="btn btn-default">提交</button> 
 </form> 
<?php 
if($_POST){ 
 echo "<br /><pre>"; 
 print_r($_POST); 
} 
?> 
</div> 
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/jquery.cxselect.min.js"></script> 
<script> 
$('#cnMap').cxSelect({ 
 url: 'js/cityData.min.json', 
 //url: 'js/cityData.min.json', 
 selects: ['province', 'city', 'region'], 
 nodata: 'none' 
}); 
 
$('#globalMap').cxSelect({ 
 url: 'js/globalData.min.json', 
 selects: ['country', 'state', 'city', 'region'], 
 nodata: 'none' 
}); 
 
//表单验证start 
$("#subBut").click(function(){ 
 if (!$("#cnMap .province").val() && !$("#cnMap .province").attr('disabled')) 
 { 
 alert('请选择省份 :)'); 
 $("#cnMap .province").focus(); 
 return false; 
 } else if (!$("#cnMap .city").val() && !$("#cnMap .city").attr('disabled')) { 
 alert('请选择市 :)'); 
 $("#cnMap .city").focus(); 
 return false; 
 } else if (!$("#cnMap .region").val() && !$("#cnMap .region").attr('disabled')) { 
 alert('请选择县区 :)'); 
 $("#cnMap .region").focus(); 
 return false; 
 } else { 
 return true; 
 } 
}); 
//表单验证end 
</script> 
</body> 
</html>

必须的JS文件:jquery.cxselect.js 或 jquery.cxselect.min.js(压缩版)
必须的JSON文件:cityData.min.json(全国的城市列表) 和 globalData.min.json(全世界的城市列表)
这些都可以从这里下载:https://github.com/ciaoca/cxSelect

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
js如何打印object对象
Oct 16 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
Vue异步组件使用详解
Apr 08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 #Javascript
过期软件破解办法实例详解
Jan 04 #Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 #Javascript
javascript实现一个网页加载进度loading
Jan 04 #Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 #Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 #Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php模板引擎技术简单实现
2016/03/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python中二维阵列的变换实例
2014/10/09 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
学院书画协会部门职责
2013/11/28 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
合伙协议书范本
2014/04/21 职场文书
商场租赁意向书
2014/07/30 职场文书
创先争优活动心得体会
2014/09/04 职场文书
营销总监岗位职责
2014/09/16 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
python小程序之飘落的银杏
2021/04/17 Python
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python