小白前端进阶模块1————国省市县联动

时间：2019-01-29 18:12:39 阅读：179 评论：0 收藏：0 [点我收藏+]

标签：cti 条件语句 class eval 省份 text err doc ref

1.分析任务

使用AJAX读取JSON文件数据，利用循环及条件语句将所需要的数据分别存储在各个数组中，结合change事件即可达到所需功能

2.优缺点分析

优点：不仅在实现其基本功能，还可在json文件中更改index的属性值，更改下拉列表中的顺序。

缺点：越到低层，嵌套越严重，但无法避免（自认为）

3.代码展示

linkage.html 文件：

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <link rel="stylesheet" href="css/linkage.css">
 5     <script src="jquery/jquery-1.7.1.js"></script>
 6     <script src="js/link.js"></script>
 7 </head>
 8 <body>
 9 <div><select class="one"><option id="q1">请选择国家</option></select></div>
10 <div><select class="two"></select></div>
11 <div><select class="three"></select></div>
12 <div><select class="four">></select></div>
13 </body>
14 </html>

link.js文件展示:

$(document).ready(function () {
$.ajax({
   url:‘data/linkage.json‘,
    type:"post",
    dataType:"json",
    success:function(data){
       /*国家*/
        var arr1 = [];
        $.each(data.nation,function (i,e) {
            arr1[e.index]=e.name;
        });
        $.each(arr1,function () {
            if(this!=null){
                $(".one").append("<option>" + this+ "</option>");
            }
        });
        /*省份*/
        var arr2 = [];
       $(".one").change(function() {
            var one_text=$(".one option:selected").text();
            $(".two").empty();
            $(".three").empty();
            $(".four").empty();
            $(".two").append("<option>" + "请选择省份"+ "</option>");
          $.each(data.nation,function (i,e) {
              if(e.name==one_text){
              $.each(e.province,function (j,h) {
                  console.log(h.name);
                      arr2[h.index]=h.name;
              })
              }
          })
          $.each(arr2,function () {
              if(this!=null){
                  $(".two").append("<option>" + this+ "</option>");
              }
          })
          console.log(arr2);
      });
         /*  市*/
          var  arr3=[];
        $(".two").change(function() {
            var one_text=$(".one option:selected").text();
            var two_text=$(".two option:selected").text();
            $(".three").empty();
            $(".four").empty();
            $(".three").append("<option>" + "请选择市"+ "</option>");



            $.each(data.nation,function (i,e) {
                if(e.name==one_text){
                    $.each(e.province,function (j,h) {
                        if(h.name==two_text) {
                            $.each(h.city,function (k,r) {
                                console.log(r.name);
                                arr3[r.index]=r.name;
                            })
                        }

                    })
                }
            })
            $.each(arr3,function () {
                if(this!=null){
                    $(".three").append("<option>" + this+ "</option>");
                }
            })





        });
        /*县*/
        var arr4=[];
        $(".three").change(function() {
            var one_text=$(".one option:selected").text();
            var two_text=$(".two option:selected").text();
            var three_text=$(".three option:selected").text();
            $(".four").empty();
           $(".four").append("<option>" + "请选择县"+ "</option>");
                $.each(data.nation,function (i,e) {
                    if(e.name==one_text){
                        $.each(e.province,function (j,h) {
                            if(h.name==two_text) {
                                $.each(h.city,function (k,r) {
                                    if(r.name==three_text) {
                                        $.each(r.county,function (l,g) {
                                            arr4[g.index]=g.name;
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
                $.each(arr4,function () {
                    if(this!=null){
                        $(".four").append("<option>" + this+ "</option>");
                    }
        });


        // wer();

 /*       function wer() {

            for (var num = 0; num < data.nation.length; num++) {
                $(".one").append("<option>" + data.nation[num].name + "</option>");
            }
        }*/

        // function wer() {
        //     $.each(data，function(i,val){
        //
        //
        //         $(".one").append("<option>" + onelink.nation[index].name + "</option>");
        //     })
        // }

    });


    },
    error:function(){
        alert(0)
    }
})
})

linkage.json文件部分展示:

{
  "nation": [
    {
      "name": "中国",
      "index":1,
      "province": [
        {
          "name": "河南省",
          "index":0,
          "city": [
            {
              "name": "郑州市",
              "index":0,
              "county": [
                {
                  "name": "郑一县",
                  "index":0
                },
                {
                  "name": "郑二县",
                  "index":1
                }
              ]
            },

4.实际操作中所遇到的问题:

在取json的值时取不到，以为是没有转换为json对象取不到值，后面循序去取数组对象的值，才把值取到。

5.知识了解：JSON对象和JSON字符串的转换

json是以字符串的形式进行传递，而json操作的是json对象。

json字符串:var str=‘{"name" : " Alica" ,"age" : " 12"}‘;

json对象:var obj={"name" : " Alica" ,"age" : " 12"};

String转换为json对象: var obj=eval(‘(‘+str+‘)‘);

json对象转换为String:var str=obj.toJSONString();

6.知识了解： jQuery遍历json对象

grep：

each：

1 　　$.each(arr, function(i, item){      
2   
3 　　});

其中arr代表的是一个数组对象，i 代表数组下标，item代表数组下标取到的内容

inArray：

var anArray = [‘one‘,‘two‘,‘three‘];
var index = $.inArray(‘two‘,anArray);
alert(index);//返回该值在数组中的键值，返回1
alert(anArray[index]);//弹出 two

可根据inArray根据内容获取内容所对应的键值

map：

小白前端进阶模块1————国省市县联动

标签：cti 条件语句 class eval 省份 text err doc ref

原文地址：https://www.cnblogs.com/zlsh-web/p/10333428.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行