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中this关键字使用方法详解
Mar 08 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Knockoutjs快速入门(经典)
2012/12/24 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
Python中random模块用法实例分析
2015/05/19 Python
python正则表达式的使用
2017/06/12 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python单例模式实例解析
2018/08/28 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
办公室前台岗位职责范本
2013/12/10 职场文书
小区门卫岗位职责
2013/12/31 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年村官工作总结
2014/11/24 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
技术入股合作协议书
2016/03/21 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
python实现Nao机器人的单目测距
2021/09/04 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Python学习之时间包使用教程详解
2022/03/21 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android