في الآونة الأخيرة ، تحتاج عدة صفحات إلى تحميل بعض مربعات القائمة المنسدلة للمستخدمين للاختيار من بينها. اتضح أنهم يتم تحميلهم على جانب الخادم ويجب استخدامه. أخيرًا ، نظرًا لاعتبارات منطق العمل ، يجب وضع بعض وظائف القائمة المنسدلة في تطبيق العميل. الآن تشعر وظائف القائمة المنسدلة بشكل أفضل بكثير من وضعها على جانب الخادم.
طرق محددة:
ضع عنصر تحكم القائمة المنسدلة في الصفحة وأضف عنصرًا لتحليل رمز HTML الذي ينشئه. بهذه الطريقة ، عند استخدام JS للتحكم الديناميكي ، سيكون رمز الاختبار واضحًا جدًا على النحو التالي:
<asp: dropdownlist id = "dropdownlist1" runat = "server"> <ASP: ListItem> 1 </ASP: ListItem> </ASP: DropDownList>
عرض في المتصفح وتحليل HTML: ما يلي هو رمز HTML الذي تم إنشاؤه بواسطة عنصر تحكم DropDownList. لا شيء مثل الاختيار العادي
هناك فرق. ثم يمكنك ملء وحذف واختيار وعناصر تحكم أخرى من خلال JS.
<تحديد name = "dropdownlist1" id = "dropdownlist1"> <Option Value = "1"> 1 </point
يمكنك حذف <ASP: ListItem> 1 </ASP: ListItem> ، والآن إضافة عناصر تحكم زر HTML لتنفيذ إضافة الخيارات وحذف جميع الخيارات على التوالي. رمز مصدر الزر كما يلي:
<input id = "button1" type = "button" value = "add Option" onClick = "addOption ()" /> <input id = "button2" type = "button" value = "delete all option" onClick = "deloption () />
إضافة وحذف وظائف على النحو التالي:
الوظيفة addOption () {var ddlobj = document.getElementById ("dropdownlist1") ؛ // احصل على كائن if (ddlobj.length> 0) deloption () ؛ // حذف كلها أولاً ، ثم أضف var opttext = new array ("infounder" ، "China" ، "beijing") ؛ Array ("0" ، "1" ، "2") ؛ var ooption = null ؛ for (var i = 0 ؛ i <opttext.length ؛ i ++) {Ooption = new Option (OptText [i] document.getElementById ("dropdownlist1") ؛ // الحصول على كائن لـ (var i = ddlobj.length-1 ؛ i> = 0 ؛ i-) {ddlobj.remove (i) ؛عرض في المتصفح ، يمكنك بسهولة إنشاء خيارات منسدلة محددة ، والتي تكون أكثر كفاءة من الخوادم لأن هذه هي التي يتم إنشاؤها بواسطة العميل
رمز يعمل على الجانب. ولكن في هذا الوقت ، إذا كنت ترغب في استخدام DropDownList1.SelectedValue لتحديد الخيار من قبل المستخدم ، فستكون لديك
حصلت على خطأ. وذلك لأن القائمة المنسدلة تمت إضافتها ديناميكيًا بواسطة JS ، لذلك لا تنتمي عناصرها إلى ViewState ولا يتم الحفاظ عليها ،
وهذا يعني ، لا يمكننا التعامل معها على جانب الخادم. لحل هذه المشكلة ، هناك طريقتان لاستخدامهما: 1. حفظ التحكم المخفي
طريقة خيار المستخدم ؛ 2. طريقة الطلب. (انظر MSDN Taste Ajax)
1. نضيف عنصر تحكم مخفي إلى الصفحة ونستخدمه لحفظ المعلومات حول التغييرات في خيارات القائمة المنسدلة ، بحيث يكون شعور المستخدم بالاختيار
بعد أن يكون لدينا معلومات ذات أهمية ، يمكننا الحصول على المعلومات على الخادم ومعالجتها لإدراك تقسيم العمل بين العملاء والخدمات بشكل معقول.
إضافة حدث onChange إلى عنصر تحكم القائمة المنسدلة ، ورمز HTML الخاص به كما يلي:
<asp: dropdownlist id = "dropdownlist1" runat = "server" onChange = "resvitem ()"> </asp: dropdownlist>
حدث OnChange كما يلي. يحفظ هذا الحدث بشكل أساسي القيمة المحددة من قبل المستخدم:
الدالة resvitem () {var objddl = document.getElementById ("dropdownlist1") ؛ document.getElementById ("Hiddenfield1"). value = objddl.options [objddl.selectedIndex] .value ؛بعد ذلك ، نستخدم التحكم في ASP: Button لاختبار النتائج:
void button1_click المحمي (مرسل الكائن ، eventArgs e) {response.write (hiddenfield1.value) ؛}في هذه المرحلة ، تم الانتهاء من كل العمل ، ولكن لا تزال هناك مشكلة. يتم تحديد حدث تغيير DropDownList فقط عندما يقوم المستخدم بتغيير المنسدلة.
سيتم تشغيله فقط عندما يكون العنصر. لذلك ، عندما يخضع المستخدم مع الخيارات الافتراضية ، يتم الحصول على القيمة الفارغة. لذلك ، عند ملء الخيار ، يمكننا
التهيئة الخفية. إضافة سطر من التعليمات البرمجية إلى حدث AddOption على النحو التالي:
الوظيفة addOption () {var ddlobj = document.getElementById ("dropdownlist1") ؛ // احصل على كائن if (ddlobj.length> 0) deloption () ؛ // حذف كلها أولاً ، ثم أضف var opttext = new array ("infounder" ، "China" ، "beijing") ؛ Array ("0" ، "1" ، "2") ؛ var ooption = null ؛ for (var i = 0 ؛ i <opttext.length ؛ i ++) {Ooption = new Option (OptText [i] ، optvalue [i]) ؛ ddlobj.options.add (ooption) ؛} OptValue [0] ؛}ومع ذلك ، فإن الجزء الأحمر أعلاه لم ينجح في إضافة متصفح TT ، ولم أحاول التصفح الأخرى بعد. هذه طريقة أخرى للكتابة:
وظيفة getDeptList () {var ddlcitytype = document.getElementById ("ddlcitytype") ؛ var ddlposition = document.getElementById ("ddlposition") ؛ var v = ddlcitytype.options deptlist = guest_userregister.getDeptList (v.value) .value ؛ var deptlist = new array () ؛ deptlist = deptlist.split ('؛') ؛ for (var i = 0 ؛ i <deptlist.length ؛ i ++) {if (deptlist document.createElement ("الخيار") ؛ opt.innerhtml = dept [1] ؛ opt.value = dept [0] ؛ ddlposition.insertbefore (OPT ، ddlposition.firstchild) ؛}}}} دالة deloption () بينما (num> 0) {for (var j = 0 ؛ j <num ؛ j ++) {ddluserschool.remove (j) ؛} num = ddluserschool.length ؛}} وظيفة getSchoollist () document.getElementById ("ddluserschool") ؛ var v = ddlprovince.options [ddlprovince.selectedIndex] ؛ var deptlist = guest_userregister.getschoolist (v.value) .value ؛ var deptlist = new array () ؛ deptlist.split. i = 0 ؛ i <deptlist.length ؛ i ++) {if (deptlist [i]! = "") {var dept = deptlist [i] .split ('،') ؛ var opt = document.createElement ("Option") ؛ opt.innerhtml = dept [1] ؛ opt.value = dept [0]