js三級聯動

來源:互聯網
上載者:User

標籤:三級聯動   log   i++   select   logs   value   json   省市區三級聯動   點擊事件   

原生js實現省市區三級聯動

html部分代碼


<select name="" id="p">
  <option value="0">請選擇省</option>
</select>
<select name="" id="c">
  <option value="0">請選擇市</option>
</select>
<select name="" id="a">
  <option value="0">請選擇區</option>
</select>

 

 

js代碼

                        (function(doc) {                            if(data.code == 200) {                                var result = data.result;                                var poption, coption, aoption;                                for(var i = 0; i < result.length; i++) {                                    poption = new Option(result[i].name, result[i].id);                                    doc.querySelector("#p").options.add(poption);                                }                                //省點擊事件                                doc.querySelector("#p").addEventListener("change", function() {                                    doc.querySelector("#c").length = 1;                                    doc.querySelector("#a").length = 1;                                    var pval = this.value;                                    for(var i = 0; i < result.length; i++) {                                        if(result[i].id == pval) {                                            var city = result[i].child;                                            for(var j = 0; j < city.length; j++) {                                                coption = new Option(city[j].name, city[j].id);                                                doc.querySelector("#c").options.add(coption);                                            }                                            return;                                        }                                    }                                });                                //市的點擊事件                                doc.querySelector("#c").addEventListener("change", function() {                                    doc.querySelector("#a").length = 1;                                    var cval = this.value;                                    for(var i = 0; i < result.length; i++) {                                        var city = result[i].child;                                        for(var j = 0; j < city.length; j++) {                                            if(city[j].id == cval) {                                                var aera = city[j].child;                                                for(var k = 0; k < aera.length; k++) {                                                    aoption = new Option(aera[k].name, aera[k].id);                                                    doc.querySelector("#a").options.add(aoption);                                                }                                            }                                        }                                    }                                });                            }                        }(document));

 

 

json資料

var data = {    "code": "200",    "msg": "success",    "result": [        {            "id": "01",            "name": "江蘇省",            "child": [                {                    "id": "011",                    "name": "南京市",                    "child": [                        {                            "id": "0111",                            "name": "雨花台區"                        }, {                            "id": "0112",                            "name": "秦淮區"                        }, {                            "id": "0113",                            "name": "玄武區"                        }, {                            "id": "0114",                            "name": "白下區"                        }                    ]                }, {                    "id": "012",                    "name": "蘇州市",                    "child": [                        {                            "id": "0121",                            "name": "吳中區"                        }, {                            "id": "0122",                            "name": "姑蘇區"                        }, {                            "id": "0123",                            "name": "高新區"                        }, {                            "id": "0124",                            "name": "開發區"                        }                    ]                }, {                    "id": "013",                    "name": "揚州市",                    "child": [                        {                            "id": "0131",                            "name": "第一區"                        }, {                            "id": "0132",                            "name": "第二區"                        }, {                            "id": "0133",                            "name": "第三區"                        }, {                            "id": "0134",                            "name": "第四區"                        }                    ]                }            ]        }, {            "id": "02",            "name": "浙江省",            "child": [                {                    "id": "021",                    "name": "杭州市",                    "child": [                        {                            "id": "0211",                            "name": "雨花台區"                        }, {                            "id": "0212",                            "name": "秦淮區"                        }, {                            "id": "0213",                            "name": "玄武區"                        }, {                            "id": "0214",                            "name": "白下區"                        }                    ]                }, {                    "id": "022",                    "name": "寧波市",                    "child": [                        {                            "id": "0221",                            "name": "吳中區"                        }, {                            "id": "0222",                            "name": "姑蘇區"                        }, {                            "id": "0223",                            "name": "高新區"                        }, {                            "id": "0224",                            "name": "開發區"                        }                    ]                }, {                    "id": "023",                    "name": "溫州市",                    "child": [                        {                            "id": "0231",                            "name": "第一區"                        }, {                            "id": "0232",                            "name": "第二區"                        }, {                            "id": "0233",                            "name": "第三區"                        }, {                            "id": "0234",                            "name": "第四區"                        }                    ]                }            ]        }    ]}

 

js三級聯動

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.