يحصل JS بشكل ديناميكي على خيارات المعقدة الفرعية وتصميم جميع التحديدات وطرق تنفيذ التقديمات

عند العمل في مشروع ما ، ستواجه فعليًا الحصول على خيارات الطفل بناءً على خيارات الوالدين وإدراج خانات اختيار متعددة. عند التقديم ، قم بدمج الشخصيات المحددة في حرف واحد وإرسالها إلى الخلفية.

سيخبرك هذا الفصل كيفية تنفيذ هذه العملية من خلال التحكم في JS:

1: تصميم الفئة الأصل كراديو ، إضافة حدث Onclick إلى كل راديو ، والفئة الافتراضية 1 هي حالة الاختيار.

 <type type = "checkbox" name = "selecall" id = "selectall" onClick = "Selectall () ؛" checked = "checked"/> حدد All <Br> <input type = "radio" name = "lb" id = "lb" value = "1" onClick = "getzlb (1) ؛" checked = "checked"/> الفئة 1 <إدخال type = "radio" name = "lb" id = "lb" value = "2" onClick = "getzlb (2) ؛"/> الفئة 2 <إدخال type = "radio" name = "lb" id = "lb" value = "3"

2: عندما يتم تحميل الصفحة في البداية ، يجب عرض الفئة الفرعية وفقًا لفئة الأصل المحددة. عند النقر فوق الزر ، يجب أيضًا الحصول على الفئة الفرعية ، بحيث يتم كتابتها بنفس الطريقة ويتم استدعاؤها بعد اكتمال تحميل الصفحة.

 window.onload = getzlb () ؛

3: احصل على طريقة JS للفئة الفرعية ، والحصول على بيانات الخلفية ديناميكيًا من خلال طريقة AJAX

 /** * احصل على فئة فرعية ، وعرضها بعد انتهاء تحميل الصفحة */وظيفة getzlb () {// get var obj = document.getElementSbyName ("lb") ؛ لـ (var i = 0 ؛ i <obj.length ؛ i ++) {if (obj [i] .checked) {getzlbnews (obj [i] .value) ؛ }}} وظيفة getzlbnews () {(الحصول على بيانات نوع الخريطة من خلال ajax ؛ إرجاع البيانات في النتيجة ، تنسيق json) var json = eval ("("+result+")") ؛ // تحويل إلى JSON Object // احصل على المنطقة المراد عرضها بواسطة النوع الفرعي var parent = document.getElementById ('xsqy') ؛ // ضع المنطقة الفرعية فارغة لمنع parent.innerhtml = '' ؛ var p = 0 ؛ var span = "" ؛ // تحقق من جميع المستندات. لـ (var i in json) {p ++ ؛ span = "<span style =/" display: inline block ؛ العرض: 75px ؛/"> <input type =/" checkbox/"checked =/" checked/"onClick =/" checkselectall () ؛/"name =/" zlb/"value =/" "+i+"/">"+json [i]+"</span> ؛ // عندما يكون هناك أكثر من 11 مربعًا فرعيًا ، ثم خط جديد إذا (p ٪ 11 == 0) {span = span+"<br>" ؛ } // إضافة مربعات فحص فرعية واحدة تلو الأخرى إلى parent.innerhtml = parent.innerhtml+span ؛ }}

4: منطق الخلفية ،

 / ** * خريطة تنسيق خريطة الإرجاع <الكود ، الاسم> * @regurn */ string public getzlb () {map <integer ، string> zlb = service.getzlb () ؛ // تحويل الخريطة إلى json format json a = jsonserializer.tojson (ZLB) ؛ إرجاع A.ToString () ؛ }

5: يتحكم JS في منطق ما إذا كان يجب تحديد الكل ، وما إذا كان يجب تحديد الكل ، وكيفية دمج الرمز المحدد عند إرساله

 / ** * حدد All أو قم بإلغاء All */ Function SelectAllDz () {var checkss = document.getElementSbyName ("ZLB") ؛ لـ (var i = 0 ؛ i <checkboxs.length ؛ i ++) {// التحكم في ما إذا كان يتم تحديد الفئة الفرعية بناءً على ما إذا كان يتم تحديد الزر المحدد جميعًا للتحكم في مربعات الاختيار [i] .checked = document.getElementById ("selecall"). }}/ ** * حدد ما إذا كانت الفئة الفرعية محددة الكل ، إذا تم تحديد الزر المحدد ، وإلا لم يتم تحديد الزر المحدد */ وظيفة checkselectall () {var checkss = document.getElementsByName ("ZLB") ؛ var isselectall = true ؛ لـ (var i = 0 ؛ i <checkboxs.length ؛ i ++) {if (مربعات الاختيار [i] .checked == false) {isselectall = false ؛ }} if (isselectall == false) {document.getElementById ("selectall"). checked = false ؛ } آخر {document.getElementById ("selectall"). checked = true ؛ }}/*** قم بربط المعرفات المحددة وفصلها باستخدام passas*/function getAllidStr (checkName) {var select = document.getElementSbyName (checkName) ؛ var idstr = new array () ؛ لـ (var i = 0 ؛ i <select.length ؛ i ++) {if (select [i] .checked == true) {idstr = idstr.concat (select [i] .value) ؛ }} إرجاع idstr.join ('،') ؛}

6: عند إجراء العملية التالية ، إذا قمت بإرسالها ، قم بتحويل كل شيء إلى حرف واحد وقم بتعيينه إلى مربع نص مخفي لإرساله إلى الخلفية

 // استدعاء طريقة معرف الربط وقم بتمرير اسم العنصر المراد تشغيله على var allzlb = getAllidStr ('ZLB') ؛ // إنشاء مربع نص مخفي ، وقم بتعيين التشبست إليه ، واستخدمه للحصول على المستند.

ما سبق هو مجرد رأي شخصي. إذا كان لديك أي حلول أفضل ، فيرجى إبلاغي بذلك.

ما ورد أعلاه هو المحتوى الكامل لطريقة التنفيذ للحصول على خيارات المعقدة الفرعية ديناميكيًا وتصميم جميع الاختيارات والتقديمات المقدمة إليك. آمل أن يدعم الجميع wulin.com أكثر ~