用JavaScript实现动态省市县三级联动

 像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>三级联动测试</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script type="text/javascript">

        //用来获得option元素中selected属性为true的元素的id

        function Get_Selected_Id(place){

            var pro = document.getElementById(place);

            var Selected_Id = pro.options[pro.selectedIndex].id;

            return Selected_Id;         //返回selected属性为true的元素的id

        }

        //改变下一个级联的option元素的内容,即加载市或县

        function Get_Next_Place(This_Place_ID,Action){

            var Selected_Id = Get_Selected_Id(This_Place_ID);   //Selected_Id用来记录当前被选中的省或市的ID

            if(Action=='Get_city')                            //从而可以在下一个级联中加载相应的市或县

                Add_city(Selected_Id);

            else if(Action=='Get_country')

                Add_country(Selected_Id);

        }

        //用来存储省市区的数据结构

        var Place_dict = {

            "GuangDong":{

                            "GuangZhou":["PanYu","HuangPu","TianHe"],

                            "QingYuan":["QingCheng","YingDe","LianShan"],

                            "FoShan":["NanHai","ShunDe","SanShui"]

                            },

            "ShanDong":{

                            "JiNan":["LiXia","ShiZhong","TianQiao"],

                            "QingDao":["ShiNan","HuangDao","JiaoZhou"]

                            },

            "HuNan":{

                            "ChangSha":["KaiFu","YuHua","WangCheng"],

                            "ChenZhou":["BeiHu","SuXian","YongXian"]

                        }

        };

        //加载城市选项

        function Add_city(Province_Selected_Id){

            $("#city").empty();

            $("#city").append("<option>City</option>");

            $("#country").empty();

            $("#country").append("<option>Country</option>");

            //上面的两次清空与两次添加是为了保持级联的一致性

            var province_dict = Place_dict[Province_Selected_Id];   //获得一个省的字典

            for(city in province_dict){     //取得省的字典中的城市

                //添加内容的同时在option标签中添加对应的城市ID

                var text = "<option"+" id='"+city+"'>"+city+"</option>";

                $("#city").append(text);

                console.log(text);  //用来观察生成的text数据

            }

        }

        //加载县区选项

        function Add_country(City_Selected_Id){

            $("#country").empty();

            $("#country").append("<option>Country</option>");

            //上面的清空与添加是为了保持级联的一致性

            var Province_Selected_ID = Get_Selected_Id("province");     //获得被选中省的ID,从而方便在字典中加载数据

            var country_list = Place_dict[Province_Selected_ID][City_Selected_Id];  //获得城市列表

            for(index in country_list){

                ////添加内容的同时在option标签中添加对应的县区ID

                var text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";

                $("#country").append(text);

                console.log(text);  //用来观察生成的text数据

            }

        }

 

    </script>

</head>

<body>

    <p>您的收货地址:</p>

    <select id="province" onchange="Get_Next_Place('province','Get_city')">

        <option id="Not_data1">Province</option>

        <option id="GuangDong" value="GuangDong">GuangDong</option>

        <option id="ShanDong" value="ShanDong">ShanDong</option>

        <option id="HuNan" value="HuNan">HuNan</option>

    </select>

    <select id="city" onchange="Get_Next_Place('city','Get_country')">

        <option id="Not_data2">City</option>

    </select>

    <select id="country">

        <option id="Not_data3">Country</option>

    </select>

    <br/>

</body>

</html>

    测试结果如下:

未做任何选择时:

选择时:

    当然,省市县三者都是动态联动的,只要顶级的内容发生改变,所有子级的内容也会发生改变或被重置为City或Country.

时间: 2024-11-01 11:50:12

用JavaScript实现动态省市县三级联动的相关文章

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

javascript解析xml实现省市县三级联动的方法_javascript技巧

本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=

JavaScript XML省市县三级联动下拉菜单

js代码  代码如下 复制代码 <html> <head runat="server">     <title>省市县三级联动菜单</title>             <script   language="javascript"   type="text/javascript">   //首先需要初始化   var   xmlDoc;     var   nodeIndex;  

jquery读取xml文件实现省市县三级联动的方法

  本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

jquery读取xml文件实现省市县三级联动的方法_jquery

本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'city.jsp' starting p

js省市县三级联动效果实例_javascript技巧

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padd

js实现简单的省市县三级联动效果实例_javascript技巧

本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县

jQuery+jsp实现省市县三级联动效果(附源码)_jquery

本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法.分享给大家供大家参考,具体如下: 在这里,用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码) 使用过的jar包 google的Gson.jar mysql-connector-java-5.1.13-bin.jar 将实验图贴出来: 显示页面index.jsp <%@ page language="java" import="java.util.*" pageEncoding=

ajax实现无刷新省市县三级联动_AJAX相关

本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex