Selama tahap pengembangan proyek harian, efek keterkaitan tingkat kedua dari kotak drop-down sering terlihat, terutama ketika ada beberapa opsi yang melibatkan daerah, varietas, dll. Misalnya: kotak drop-down provinsi dan tautan umum akan berubah lebih banyak saat memilih provinsi.
Ide:
1. Efek hubungan yang disebut menunjukkan bahwa ketika data berubah pada tingkat induk akan mempengaruhi perubahan elemen data tingkat anak yang terkait.
Di bawah ini adalah data provinsi dan kota yang telah dibangun:
var linkDatas = {provinsi: [{"code": "0", "name": "Please Pilih "}, {" kode ":" 1 "," name ":" beijing "}, {" kode ":" 2 "," name ":" tianjin "}, {" kode ":" 3 "," name ":" Hebei "}, {" kode ":" 4 "," name ":" hubei "}, {" kode ":" 5 "," name ":" guangdong "}, {" kode ":" 6 "," na saya ":" lainnya "}], kota: {0: [" tolong pilih "], 1: [" Distrik Chaoyang "," Distrik Haidian "," Distrik Dongcheng "," Distrik Xicheng "," Fangshan Distrik "," Lainnya "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," Lainnya "], 4: [" Kota Wuhan "," Kota Yichang "," Kota Xifan "," Lainnya "], 5: [" Kota Fonhan "," Kota Xifan "," Lainnya "," 5: "" Kota "Kota", "5:" 5: "Kota" Kota "Kota", "Kota", " Kota "," kota zhuhai "," lainnya "], 6: [" lainnya "]}};2. Secara dinamis menghasilkan node opsi berdasarkan data:
fungsi addOptions (target, opsi) {var optionele = null, target = target, option = option, optionLen = option.length; for (var i = 0; i <optionlen; i ++) {optionele = document.createElement ('option'); optionele.value = option [i] .value. opsi [i] .text; target.options.add (optionele);}}3. Menurut data provinsi dan kota yang disebutkan di atas, kode tersebut mewakili pengidentifikasi yang menunjuk ke "tingkat provinsi" dan ketika data provinsi berubah, acara perubahan dimulai:
pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerHtml = ""; /*Tambahkan kota*/ untuk (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]});} addOptions (c, ctbox);}Kode HTML:
<hv> <h3> Tarik ke bawah efek tautan kotak </h3> <p> Provinsi: <pilih name = "provinsi" id = "provinsi"> </pilih> </p> <p> Kota: <pilih name = "city" id = "City"> </pilih> </p> </div>
Semua kode JavaScript:
var linkDatas = {provinsi: [{"code": "0", "name": "Please pilih "}, {" kode ":" 1 "," name ":" beijing "}, {" kode ":" 2 "," name ":" tianjin "}, {" kode ":" 3 "," name ": "Hebei"}, {"kode": "4", "name": "hubei"}, {"kode": "5", "name": "guangdong"}, {"kode": "6", "name": "Lainnya"}], kota: {0: ["tolong pilih"], 1: ["Distrik Chaoyang", "Distrik Haidian", "Distrik Dongcheng", "Distrik Xicheng", "Fangshan Distrik "," Lainnya "], 2: [" Tianjin "], 3: [" Cangzhou "," Shijiazhuang "," Qinhuangdao "," Lainnya "], 4: [" Kota Wuhan "," Kota Yichang "," Kota Xifan "," Lainnya "], 5: [" Kota Fonhan "," Kota Xifan "," Lainnya "," 5: "" Kota "Kota", "5:" 5: "Kota" Kota "Kota", "Kota", " City "," Zhuhai City "," Other "], 6: [" Other "]}}; addOptions fungsi (target, opsi) {var optionele = null, target = target, option = option, optionlen = options.length; for (var i = 0; i <optionLen; i ++) {option.crocroelement = createel (oPtionLen; i ++) {Options.crocroeled (document. Opsi [i] .value; optionele.text = opsi [i] .text; target.options.add (optionele);}} fungsi provinsicityslink (pro, c) {var ld = linkdatas, provinsi = ld.provinces, city = ld.citys, initcity = city = ld.provinces provinsi.length; i ++) {probox.push ({"text": provinsi [i] .name, "value": provinsi [i] .code})} addoptions (pro, probox);/*inisialisasi kota*/addoptions (c, [{"teks": init -incity, "value": ininia: ininia (c, [{{{{{{{{{{{{{{{{{{{{": function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerHtml = ""; /*Add city*/ for(var j = 0;j < ctLen;j++){ctBox.push({"text" : ct[j],"value": ct[j]});}addOptions(c,ctBox);}}var provinces = document.getElementById('provinces'),citys = document.geteLementById ('Citys'); provincitySlink (provinsi, kota);