رمز التنفيذ البسيط لتأثيرات الارتباط في المقاطعات والبلدية (موصى بها)

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

الأفكار:

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

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

 var linkDatas = {Provinces: [{"code": "0" ، "name": "الرجاء تحديد"} ، {"رمز": "1" ، "الاسم": "beijing"} ، {"code": "2" ، "name": "tianjin"} ، "name": "Hubei"} ، {"Code": "5" ، "name": "Guangdong"} ، {"Code": "6" ، "name": "Other"}] ، 2: ["Tianjin"] ، 3: ["Cangzhou" ، "Shijiazhuang" ، "Qinhuangdao" ، "Other"] ، 4: ["Wuhan City" ، "Yichang City" ، "Shantou" ، "مدينة Zhuhai" ، "Other"] ، 6: ["Other"]}} ؛

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

 الدالة addOptions (الهدف ، الخيارات) {var orportele = null ، target = target ، Option = Options ، OptionLen = Options.Length ؛ لـ (var i = 0 ؛ i <optionlen ؛ i ++) {intersele = document.createElement ('Option') ؛ OptionEle.value = الخيار [i]. value ؛ OptionEle.Text = Option [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"

كل رمز JavaScript:

 var linkDatas = {Provinces: [{"code": "0" ، "name": "الرجاء تحديد"} ، {"رمز": "1" ، "الاسم": "beijing"} ، {"code": "2" ، "name": "tianjin"} ، "name": "Hubei"} ، {"Code": "5" ، "name": "Guangdong"} ، {"Code": "6" ، "name": "Other"}] ، 2: ["Tianjin"] ، 3: ["Cangzhou" ، "Shijiazhuang" ، "Qinhuangdao" ، "Other"] ، 4: ["Wuhan City" ، "Yichang City" ، "Shantou" ، "مدينة Zhuhai" ، "Other"] ، 6: ["Other"]}} ؛ الدالة addOptions (الهدف ، الخيارات) {var orportele = null ، target = target ، Option = Options ، OptionLen = Options.Length ؛ لـ (var i = 0 ؛ i <optionlen ؛ i ++) {intersele = document.createElement ('Option') ؛ OptionEle.value = الخيار [i]. value ؛ OptionEle.Text = Option [i] .text ؛ target.options.add (OptionEle) ؛ }} provinceSexitySlink (pro ، c) {var ld = linkdatas ، المقاطعات = ld.provinces ، city = ld.citys ، itmity = city [0] ، probox = [] ؛ /*إضافة المقاطعة*/ for (var i = 0 ؛ i <processins.length ؛ i ++) {probox.push ({"text": المقاطعات /*تهيئة المدينة*/ addOptions (C ، [{"text": iting ، "value": iting}]) ؛ /*إضافة حدث ربط*/ 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) ؛ }} var provinces = document.getElementById ('Provinces') ، cities = document.getElementById ('citys') ؛ المقاطعات (المقاطعات ، المدينة) ؛

إن رمز التنفيذ البسيط أعلاه (الموصى به) لتأثير الربط بين المقاطعات والبلدية هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.