task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。

<!DOCTYPE html>
<html>
<head>
    <title>完成省城市的三级联动(包括湖南省),附代码和效果图。</title>
</head>
<body>
 <select id="province">
   <option value="-1">请选择</option>
 </select>
 <select id="city"></select>
 <select id="country"></select>
 <script type="text/javascript">
   var provinceArr = [‘上海‘,‘江苏‘,‘河北‘,‘湖南‘];
   var cityArr = [
                  [‘上海市‘],
                  [‘苏州市‘,‘南京市‘,‘扬州市‘],
                  [‘石家庄‘,‘秦皇岛‘,‘张家口‘],
                  [‘长沙市‘,‘株洲市‘,‘湘潭市‘]
                 ];
    var countryArr =[
                     [
                      [‘黄浦区‘,‘静安区‘,‘长宁区‘,‘浦东区‘]
                     ],
                     [
                      [‘虎丘区‘,‘吴中区‘,‘相城区‘,‘姑苏区‘,‘吴江区‘],
                      [‘玄武区‘,‘秦淮区‘,‘建邺区‘,‘鼓楼区‘,‘浦口区‘],
                      [‘邗江区‘,‘广陵区‘,‘江都区‘]
                     ],
                     [
                      [‘长安区‘,‘桥西区‘,‘新华区‘,‘井陉矿区‘],
                      [‘海港区‘,‘山海关区‘,‘北戴河区‘,‘抚宁区‘],
                      [‘桥东区‘,‘桥西区‘,‘宣化区‘,‘下花园区‘]
                     ],
                     [
                      [‘芙蓉区‘,‘岳麓区‘,‘天心区‘,‘开福区‘],
                      [‘荷塘区‘,‘芦淞区‘,‘石峰区‘,‘天元区‘],
                      [‘雨湖区‘,‘岳塘区‘]
                     ]
                    ];
    function creatOption(obj,data){
        for(var i in data){
            var op = new Option(data[i],i);
            obj.options.add(op);
        }
    }
    var province = document.getElementById(‘province‘);
    creatOption(province,provinceArr);   

    var city = document.getElementById("city");
    province.onchange = function(){
        city.options.length = 0;
        creatOption(city,cityArr[province.value]);
        if(province.value >= 0){
            city.onchange();
        }else{
            country.options.length = 0;
        }
    };

    var country = document.getElementById("country");
    city.onchange = function(){
        country.options.length = 0;
        creatOption(country,countryArr[province.value][city.value]);
    };
 </script>
</body>
</html>

原文地址:https://www.cnblogs.com/chenqintaotao/p/11658772.html

时间: 2024-10-09 19:06:43

task 1:完成省城市的三级联动(包括湖南省),附代码和效果图。的相关文章

省市区三级联动菜单(附数据库)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-------------------------------------------------------------- --省的字段是:province --市的字段是:city --县的字段是:area ----------------------

三级联动,之前那个代码太难看了 在更新一下

<body> 年<select id="a"></select> 月<select id="b"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <op

多级联动系列——ajax调用XML实现三级联动

ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml version="1.0" encoding="UTF-8"? > <list> <province name="河南" id='1'> <city name="焦作" id='11'>

jquery 城市三级联动

js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(provinceN,cityN,districtN){ var all_province=""; for(var i=0;i<allCity.province.length;i++){ all_province+='<option name="province"

转: javascript实现全国城市三级联动菜单代码

<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script LANGUAGE="JavaScript"> function Dsy() { this.Items = {}; } Dsy

城市三级联动 AJAX-原生js封装

话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> <link rel="shortcut icon" href="../public/image/favi

省份、城市、区县三级联动Html代码

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script ty

三级联动,json数据、可设置默认城市

闲来无事,折腾个三级联动,json数据.可设置默认城市.可配置是否显示第三级select <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市县三级联动</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script&g

城市三级联动Springmvc+mysql

昨天我做了一个功能,就是一个简单的城市三级联动,现在贴上分享 是采用springmvc+mysql去做的,最后台的东西我就不写了,就是写控制层+HTML+Jquery的部分,以下是控制层 1 //获取省市区 2 @RequestMapping(value="province.do") 3 @ResponseBody 4 public Map<String, Object> province(HttpServletRequest request,HttpServletResp