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 Request获取请求参数如何实现
Nov 28 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
express框架中使用jwt实现验证的方法
Aug 25 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 OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP中文编码小技巧
2014/12/25 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php中错误处理操作实例分析
2019/08/23 PHP
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
药品采购员岗位职责
2014/02/08 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
优秀护士演讲稿
2014/04/30 职场文书
社区活动总结报告
2014/05/05 职场文书