下拉select选项多级联动实例。
center">
cxselect插件使用方法：
1. 引入JS，
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.jb51.net/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' }); </script>
实例源码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> --> <meta content="EditPlus®"> <meta content=""> <meta content=""> <meta 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="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" /> </head> <body> <h1>下拉联动</h1> <div> <form method="post" action="" role="form"> <div> <label for="firstname">全国<small> (省、市、县三级；包括提交表单的验证。)</small></label> <div> <select disabled="disabled" data-first-title="选择省份"></select> </div> <div> <select disabled="disabled"></select> </div> <div> <select disabled="disabled"></select> </div> </div> <hr /> <div> <label for="firstname">全球<small> (国、省、市、县三级；未做表单验证。)</small></label> <div> <select disabled="disabled" data-first-title="选择国家"></select> </div> <div> <select disabled="disabled"></select> </div> <div> <select disabled="disabled"></select> </div> <div> <select disabled="disabled"></select> </div> </div> <!-- <h2>全国</h2> <div> <select disabled="disabled" data-first-title="选择省份"></select> <select disabled="disabled"></select> <select disabled="disabled"></select> </div> <h2>全球</h2> <div> <select disabled="disabled" data-first-title="选择国家"></select> <select disabled="disabled"></select> <select disabled="disabled"></select> <select disabled="disabled"></select> </div> --> <br /> <button type="submit">提交</button> </form> <?php if($_POST){ echo "<br /><pre>"; print_r($_POST); } ?> </div> <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://www.jb51.net/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个精彩的专题：