实现方式千差万别，满足自己需求的才是最好的。

插件版提供了两种方式：

distpicker版

！DOCTYPE html html hearteta charset=' utf-8 ' link href=' CSS/City。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表type=' text/CSS '/script src=' http : js/jquery-2。2 .0 .量滴js '/script script src=' http : js/dist picker。数据。js '/script script src=' http : js/

distpicker.data.js、distpicker.js下载地址

第二种插件版

！DOCTYPE html html towneta charset=' utf-8 ' link href=' CSS/city。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表type=' text/CSS '/script type=' text/JavaScript ' src=' http : js/jquery。量滴js/script脚本类型=' text/JavaScript ' src=' http 3360 js/city。量滴js '/脚本/脚本所在地区：/label div class=' list style ' span id='省份我请选择省份/I ul lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt='请选择省份'请选择省份/a/li /ul输入类型='隐藏'名称=' cho _省份'值='请选择省份/span span id='City' i请选择城市/I ul lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt='请选择城市'请选择城市/a/li /ul输入类型='隐藏'名称='cho_City '值='请选择城市/span span id='区域我请选择地区/I ul lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' alt='请选择地区'请选择地区/a/li /ul输入类型='隐藏'名称='cho_Area '值='请选择地区/span/div/div/form/div id=' content-right '/div/div/body/html(9501 . 163.com)

相关射流研究…下载地址：链接： jqueryminjs

钢性铸铁下载地址：链接： css

无插件版：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href='//cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS ' rel='外部no follow/head body p/p div class=' row ' div class=' col-sm-12 ' div class=' form-group ' label class=' control-label col-sm-2 '所在区域/label div class=' col-sm-3 ' select name=' input _ vehicle ' id=' input _ vehicle ' class=' form-control '/select/div class=' col-sm-3 ' select name=' input _ city ' id=' input _ city ' class=' form-control '/select/div/div/p/p div class=' col-sm-3 ' select name=' input _ area ' id=' input _ area ' class=' form-control '/select/div/div/p/p div class=' row-text数据来源：a href=' http://www . 统计数据。gov.cn/tjsj/tjbz/xzqhdm/201504/t 20150415 _ 712722。html ' target=' _ blank ' http://www .统计数据。gov.cn/tjsj/tjbz/xzqhdm/201504/t 20150415 _ 712722。html/a/div脚本类型='文本请选择==/option '；$('#input_city ').追加(html)；$(“# input _ area”).追加(html)；$.每个(pdata，function(idx，item){ if(ParSeint(item。level)=1){ html=' option value=' item。名称为“exid=”的项目。代码' ' '项目。name '/option '；} });$(' # input _省份')。追加(html)；$(' # input _省份')。change(function() { if($(this)).val()==' ')返回；$('#input_city选项')。移除();$('#input_area选项')。移除();定义变量代码=$(这个).查找(“option:selected”).attr(' exid ')；code=code.substring(0，2)；var html='选项值=''==请选择==/option '；$(“# input _ area”).追加(html)；$.每个(pdata，function(idx，item){ if(ParSeint(item。level==2代码==item。代码。子字符串(0，2)){ html=' option value=' item。名称为“exid=”的项目。代码' ' '项目。name '/option '；} });$('#input_city ').追加(html)；});$('#input_city ').change(function() { if($(this)).val()==' ')返回；$('#input_area选项')。移除();定义变量代码=$(这个).查找(“option:selected”).attr(' exid ')；code=code.substring(0，4)；var html='选项值=''==请选择==/option '；$.每个(pdata，function(idx，item){ if(ParSeint(item。level)=3代码==item。代码。子字符串(0，4)){ html=' option value=' item。名称为“exid=”的项目。代码' ' '项目。name '/option '；} });$(“# input _ area”).追加(html)；});//绑定$(' # input _省份')。" val("山东省');$(' # input _省份')。change()；$('#input_city ')." val("潍坊市');$('#input_city ').change()；$(“# input _ area”)." val("诸城市');});/脚本/正文/html

pdata.js下载地址

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