下拉挑选选项多级联动实例。

cxselect插件使用方法：

1.引入JS，脚本src=' http :http://apps。bdimg。com/libs/jquery/1。9 .1/jquery。量滴JS '/脚本脚本src=' http : JS/jquery。cxsele。量滴JS '/脚本

2.射流研究…项设置点击此处了解更多信息：http://代码。中情局亚奥理事会。com/jquery/cxsele/

脚本$('#cnMap ').cxsele({ URL : ' js/city数据。量滴JSON '，//URL : ' js/城市数据。量滴JSON '，选择3360['省','市','地区]，no data : ' none ' })；$('#globalMap ').cxsele({ URL : ' js/全局数据。量滴JSON '，selects: ['country '，' state '，' city '，' region']，no data : ' none ' })；/script实例源码：

！DOCTYPE html html标题元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=边'元名称=“视口”内容=' width=设备宽度，初始比例=1 '！- link href='favicon.ico' rel='快捷图标type=' image/x-icon '/link href=' fav icon。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垫片和回应。射流研究…用于让IE8支持HTML5元素和媒体查询- !-注意：如果通过文件：//引入回应。射流研究…文件，则该文件无法起效果- !-[如果lt IE 9]脚本src=' http :https://OSS。maxcdn。com/libs/html 5 shiv/3。7 .0/html 5 shiv。js /脚本脚本src=' http :https://OSS。maxcdn。com/libs/response。js/1。3 .0/响应。量滴js /脚本！[endif]-title union select/title link href=' http://apps。bdimg。com/libs/bootstrap/3。3 .4/CSS/bootstrap。量滴CSS ' rel='样式表/头体h1对齐=“中心”下拉联动/h1 div id=' class=' container '表单方法='post '操作=' class=' form-横置'角色=' form ' div class=' form-group ' id=' CNmap '标签for='名字' class=' col-sm-3 control-label '全国小（省、市、县三级；包括提交表单的验证)/small/label div class=' col-sm-3 ' select name='省份类='省份表单-控件disabled=' disabled '数据优先-标题='选择省份/select/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/HR/div class=' form-group ' id=' global map ' label for=' first name ' class=' col-sm-4 control-label '全球小（国、省、市、县三级；未做表单验证。

)/small/label div class=' col-sm-2 ' select name=' country ' class=' country form-control ' disabled=' disabled ' data-first-title='选择国家/select/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 class=' col-sm-2 ' select name=' region ' class=' region form-control ' disabled=' disabled '/select/div/div！- h2全国/h2 div id='cnMap '选择名称='省份类='省份disabled=' disabled '数据优先-标题='选择省份/select select name=' city ' class=' city ' disabled=' disabled '/select select select select name=' region ' class=' region ' disabled=' disabled '/select/div H2全球/H2 div id='全球地图'选择名称='国家' class='国家' disabled=' disabled ' data-first-title='选择国家/select select name=' state ' class=' state ' disabled=' disabled '/select select select name=' city ' class=' city ' disabled=' disabled '/select select select select name=' region ' class=' region ' disabled=' disabled '/select/div-br/button id=' subbutt ' type=' submit ' class=' BTN BTN-默认'提交/按钮/表单？ PHP if($ _ POST){ echo ' br/pre '；print _ r($ _ POST)；} ?/div脚本src=' http :http://apps。bdimg。com/libs/jquery/1。9 .1/jquery。量滴js /脚本脚本src=' http : js/jquery。cxsele。量滴js /脚本脚本$('#cnMap ').cxsele({ URL : ' js/city数据。量滴JSON '，//URL : ' js/城市数据。量滴JSON '，选择3360['省','市','地区]，no data : ' none ' })；$('#globalMap ').cxsele({ URL : ' js/全局数据。量滴JSON '，selects: ['country '，' state '，' city '，' region']，no data : ' none ' })；//表单验证开始$('#subBut ').单击(function(){ if(！$('#cnMap .省')。val()！$('#cnMap .省')。attr('已禁用'){ alert('请选择省份：)');$('#cnMap .省')。焦点();返回false} else if(！$('#cnMap .城市')。val()！$('#cnMap .城市')。attr('已禁用'){ alert('请选择市：)');$('#cnMap .城市')。焦点();返回false} else if(！$('#cnMap .区域')。val()！$('#cnMap .区域')。attr('已禁用'){ alert('请选择县区：)');$('#cnMap .区域')。焦点();返回false } else { return true } })；//表单验证结束/脚本/正文/html必须的射流研究…文件：jquery。cxsele。射流研究…或jquery。cxsele。量滴js(压缩版)必须的JSON文件：cityData.min.json(全国的城市列表)和globalData.min.json(全世界的城市列表)这些都可以从这里下载：https://github。com/CIA OCA/cxsele

如果你还想深入学习，可以点击这里学习，然后附上3个精彩话题给大家：

引导学习教程

引导实用教程

引导表教程

引导插件教程

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。