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编程起步(第七课)
Jan 10 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
原生js实现放大镜
Feb 20 Javascript
面试常见的js算法题
Mar 23 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
php 如何获取数组第一个值
2013/08/06 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Django实现celery定时任务过程解析
2020/04/21 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
TCP/IP的分层模型
2013/10/27 面试题
能源工程专业应届生求职信
2014/03/01 职场文书
公司踏青活动方案
2014/08/16 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
晚会开场白和结束语
2015/05/29 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
总结Python变量的相关知识
2021/06/28 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫