【JavaScript】全国城市三级联动

来源：互联网发布：linux 桌面 2017 编辑：程序博客网时间：2024/05/01 18:44

全部代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三级城市联动</title><script src="js/prototype.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script type="text/javascript">var shengData=[['湖南省','hn'],['广东省','gd'],['北京市','bj'],['河北省','hb']];var cityDate=new Array;cityDate[1]=[['衡阳市','hys'],['怀化市','hhs'],['岳阳市','yys']];cityDate[2]=[['广州市','gzs'],['东莞市','dgs']];cityDate[3]=[['朝阳区','zyq'],['北京市','bjs']];var xianDate=new Array;xianDate[1]=[[['衡南县','hnx'],['衡东县','hdx']],[['怀化一县','hnx'],['怀化二县','hdx']],[['岳阳一县','hnx'],['岳阳二县','hdx'],['岳阳三县','hdx']]];xianDate[2]=[[['广东一县','hnx'],['广东二县','hdx']],[['东莞一县','hnx'],['东莞二县','hdx'],['东莞三县','hdx']]];xianDate[3]=[[['朝阳一县','hnx'],['朝阳二县','hdx'],['朝阳三县','hdx']]];function setshi() {var shengid=$('sheng').selectedIndex;$('shi').length=1;$('xian').length=1;for (var i = 0; i < cityDate[shengid].length; i++) {$('shi').options.add(new Option(cityDate[shengid][i][0],cityDate[shengid][i][1]));}}function setxian() {var shengid=$('sheng').selectedIndex;var shiid=$('shi').selectedIndex;$('xian').length=1;for (var i = 0; i < xianDate[shengid].length; i++) {$('xian').options.add(new Option(xianDate[shengid][shiid-1][i][0],xianDate[shengid][shiid-1][i][1]));}}</script></head><body><div class="container text-center"><div class="panel panel-default"><div class="panel-body" style="font-size: 25px;font-weight: bold;">全国城市三级联动</div></div><form class="form-inline"><select class="form-control" id="sheng" onchange="setshi();"><option>--选择省份--</option></select><select class="form-control" id="shi" onchange="setxian()"><option>--地级市--</option></select><select class="form-control" id="xian"><option>--市、县级市--</option></select></form></div><script type="text/javascript">for (var s=0; s<shengData.length; s++) {$('sheng').options.add(new Option(shengData[s][0],shengData[s][1]));}</script></body></html>

prototype.js这个js框架得加上，bootstrap.min.css这个是CSS样式，可加可不加

阅读全文

0 0