استنادًا إلى JS ، تبادل الكود لتأثير الربط في المقاطعات والبلدية

خلال مرحلة تطوير المشروع اليومية ، غالبًا ما ينظر إلى تأثير الارتباط من المستوى الثاني للمربع المنسدلة ، خاصةً عندما تكون هناك خيارات متعددة تتضمن مناطق وأصناف ، إلخ على سبيل المثال: سيتغير صندوق المنسدلة المشتركة بين المقاطعات والبلدية أكثر عند اختيار المقاطعة.

الأفكار:

1. يشير ما يسمى تأثير الارتباط إلى أنه عندما تتغير البيانات على مستوى الأصل ، سيؤثر على تغييرات عناصر بيانات مستوى الطفل المرتبطة بها.

فيما يلي بيانات المقاطعات والمدن التي تم بناؤها:

 var linkDatas = {Provinces: [{"code": "0" ، "name": حدد "} ، {" code ":" 1 "،" name ":" beijing "} ، {" code ":" 2 "،" name ":" tianjin "} ، {" code ":" 3 "،" name ":" hebei "} ، {" code ":" 4 "،" name ":" hubei "} ، {" code ":" 5 "،" name ":" Guangdong "} ، {" code ":" 6 "،" na Me ":" Other "}] ، Citys: {0: [" Lefert Select "] ، 1: [" Chaoyang District "،" Haidian District "،" Dongcheng District "،" Xicheng District "،" Fangshan District "،" Other "] ، 2: [" Tianjin "] ، 3: [" Cangzhou "،" Shijiazhuang "،" Qinhuangdao "،" Other "] ، 4: City "،" Foshan City "،" Zhuhai City "،" Other "] ، 6: [" Other "]}} ؛

2. توليد ديناميكي عقد خيار بناءً على البيانات:

 الوظيفة addOptions (الهدف ، الخيارات) {var ortionele = null ، target = target ، orpoy = options ، optionLen = Options.Length ؛ for (var i = 0 ؛ i <orportlen ؛ i ++) {optionEle = document.createElement ('Option') ؛ ortiveele الخيار [i] .text ؛ target.options.add (OptionEle) ؛}}

3. وفقًا للبيانات الإقليمية والبلدية المذكورة أعلاه ، يمثل الكود المعرف الذي يشير إلى "مستوى المقاطعة" وعندما يتغير بيانات المقاطعة ، يبدأ حدث التغيير:

 pro.onchange = function () {console.log (this) ؛ var ct = city [this.value] ، ctlen = ct.length ، ctbox = [] ؛ c.innerhtml = "" ؛ /*إضافة مدينة*/ for (var j = 0 ؛ J <ctlen ؛ j ++) {ctbox.push ({"text": ct [j] ، "value": ct [j]}) ؛} addOptions (c ، ctbox) ؛}

رمز HTML:

 <div> <h3> انسحب لأسفل تأثير ربط المربع </h3> <p> المقاطعة: <حدد name = "المقاطعات" id = "المقاطعات"> </select> </p> <p> المدينة: <select name = "citys" id = "citys"> </select> </p> </p>

كل رمز JavaScript:

 var linkDatas = {Provinces: [{"code": "0" ، "name": حدد "} ، {" Code ":" 1 "،" name ":" beijing "} ، {" code ":" 2 "،" name ": "hebei"} ، {"code": "4" ، "name": "hubei"} ، {"code": "5" ، "name": "Guangdong"} ، {"code": "6" ، "others"}] ، المدينة: {0: ["الرجاء تحديد"] ، 1: ["مقاطعة تشويانغ" ، "حي هايديان" ، "مقاطعة دونغشنغ" ، "مقاطعة شيتشنغ" ، "فانغشان District "،" Other "] ، 2: [" Tianjin "] ، 3: [" Cangzhou "،" Shijiazhuang "،" Qinhuangdao "،" Other "] ، 4: City "،" Foshan City "،" Zhuhai City "،" Other "] ، 6: [" Other "]} ؛ Function AddOptions (الهدف ، الخيارات) {var optionele = null ، target = target ، esports = optionlen = OptionS.Length ؛ for (var i = 0 ؛ i <optionlen ؛ i ++) الخيار [i] .value ؛ ortiveele.text = الخيار [I] المقاطعات. function () {console.log (this) ؛ var ct = city [this.value] ، ctlen = ct.length ، ctbox = [] ؛ c.innerhtml = "" ؛ /*إضافة مدينة*/ for (var j = 0 ؛ j <ctlen ؛ j ++) {ctbox.push ({"text": ct [j] ، "value": ct [j]}) ؛ document.getElementById ('Citys') ؛ ProviceScySlink (المقاطعات ، المدن) ؛