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 相关文章推荐
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
php mysql数据库操作分页类
2008/06/04 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
详解PHP归并排序的实现
2016/10/18 PHP
JavaScript中的其他对象
2008/01/16 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
Python实现的科学计算器功能示例
2017/08/04 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
汽车检测与维修专业求职信
2013/10/30 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
高中毕业生自我鉴定例文
2013/12/29 职场文书
20年同学聚会感言
2014/02/03 职场文书
信息技术培训感言
2014/03/06 职场文书
初一新生军训方案
2014/05/22 职场文书
消防标语大全
2014/06/07 职场文书
班级心理活动总结
2014/07/04 职场文书
解除劳动合同证明书
2014/09/26 职场文书
教师节横幅标语
2014/10/08 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS