فهم أساسي:
var e = document.getElementById("selectId");
e.options= new Option("text"،"value");
// أنشئ كائن خيار، أي أنشئ واحدًا أو أكثر من <option value="value">نص</option> في علامة <select>
//options عبارة عن مصفوفة يمكنها تخزين علامات متعددة مثل <option value="value">text</option>
1: خصائص مصفوفة الخيارات[]:
سمة الطول --------- سمة الطول
سمة الفهرس المحدد --------- قيمة الفهرس للنص الموجود في المربع المحدد حاليًا يتم تخصيص قيمة الفهرس هذه تلقائيًا بواسطة الذاكرة (0،1،2،3...) المقابلة لـ (قيمة النص الأولى ، قيمة النص الثاني، قيمة النص الثالث، قيمة النص الرابع...)
2: سمات خيار واحد (---obj.options[obj.selecedIndex] هي علامة <option> محددة، وهي ---)
سمة النص --------- إرجاع/تحديد النص
سمة القيمة-----إرجاع/تحديد القيمة، بما يتوافق مع <options value="...">.
سمة الفهرس ------- إرجاع الحرف المنخفض،
السمة المحددة ------- إرجاع/تحديد ما إذا كان الكائن محددًا أم لا، يمكن تغيير العنصر المحدد ديناميكيًا
السمة الافتراضية المحددة ----- إرجاع ما إذا كان الكائن محددًا بشكل افتراضي. صحيح / خطأ.
3: طريقة الخيار
أضف علامة <option>-----obj.options.add(new("text"،value"));<add>
حذف علامة <option>-----obj.options.remove(obj.selectedIndex)<delete>
احصل على نص علامة <option>-----obj.options[obj.selectedIndex].text<check>
تعديل قيمة علامة <option>-----obj.options[obj.selectedIndex]=new Option("new text"،"new value")<change>
قم بإزالة كافة علامات <option>-----obj.options.length = 0
احصل على قيمة علامة <option>-----obj.options[obj.selectedIndex].value
يلاحظ:
ج: تمت كتابة الطريقة المذكورة أعلاه مثل هذا النوع من الطريقة obj.options.function() بدلاً من obj.funciton، لأنه من أجل مراعاة التوافق ضمن IE وFF، على سبيل المثال، obj.add() صالح فقط في IE .
ب: لا يحتاج الخيار الموجود في obj.option إلى الكتابة بالأحرف الكبيرة، ويحتاج الخيار الموجود في الخيار الجديد إلى الكتابة بالأحرف الكبيرة.
تطبيقين
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<لغة سكريبت = "جافا سكريبت">
رقم الوظيفة (){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("My Eat"،"4");// تغيير قيمة الخيار المحدد حاليًا
//obj.options.add(new Option("طعامي"،"4"));إضافة خيار آخر
//alert(obj.selectedIndex);//عرض الرقم التسلسلي، يتم تعيين الخيار من تلقاء نفسه
//obj.options[obj.selectedIndex].text = "طعامي"؛
//obj.remove(obj.selectedIndex); حذف الوظيفة
}
</script>
</الرأس>
<الجسم>
<حدد معرف = "mySelect">
<option>حقيبتي</option>
<option>دفتر ملاحظاتي</option>
<option>زيتي</option>
<option>اعبائي</option>
</حدد>
<نوع الإدخال = "زر" اسم = "زر" قيمة = "عرض النتائج" عند النقر = "رقم ()؛">
</الجسم>
</html>
بناءً على هذه الأمور، قمت بتنفيذ دالة صغيرة باستخدام JQEURY AJAX+JSON كما يلي:
كود JS: (يتم أخذ الكود المتعلق بـ SELECT فقط)
انسخ رمز الكود كما يلي:
/**
* القائمة المنسدلة لربط المكونات @description (يتم تنفيذها باستخدام JQUERY's AJAX وJSON)
* @prarm حدد معرف القائمة المنسدلة
* @prarm طريقة اسم الطريقة التي سيتم استدعاؤها
* @prarm temp يتم تخزين معرف البرنامج هنا
* @prarm url العنوان الذي سيتم الانتقال إليه
*/
وظيفة linkAgeJson(selectId,method,temp,url){
$j.اجاكس({
type: "get"،// استخدم طريقة الحصول للوصول إلى الخلفية
نوع البيانات: "json"،// إرجاع البيانات بتنسيق json
url: url,//العنوان الخلفي المراد الوصول إليه
data: "method=" +method+"&temp="+temp,//البيانات المراد إرسالها
النجاح: الوظيفة (msg) {// msg هي البيانات التي تم إرجاعها، ويتم ربط البيانات هنا
بيانات فار = msg.lists؛
CoverJsonToHtml(selectId,data);
}
});
}
/**
* @description تحويل بيانات JSON إلى تنسيق بيانات HTML
* @prarm حدد معرف القائمة المنسدلة
* قام @prarmNodeArray بإرجاع صفيف JSON
*
*/
غطاء الوظيفةJsonToHtml(selectId,nodeArray){
// احصل على التحديد
var tempSelect=$j("#"+selectId);
// مسح قيمة التحديد
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i<nodeArray.length;i++){
// إنشاء خيار التحديد
tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');
// ضع الخيار للاختيار
tempSelect.append(tempOption);
}
// احصل على قائمة المكونات المتدهورة
getCpgjThgl(selectId,'thgjDm');
}
/**
* @description قم بمسح قيمة القائمة المنسدلة
* @prarm حدد معرف القائمة المنسدلة
* @prarm Index موضع الفهرس حيث تبدأ عملية المقاصة
*/
الدالة هيClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length;
بينما (الطول! = الفهرس) {
// يتغير الطول لأنه يجب إعادة اكتسابه
length=document.getElementById(selectId).options.length;
ل(فار ط=الفهرس;أنا<الطول;i++)
document.getElementById(selectId).options.remove(i);
الطول=الطول/2;
}
}
/**
* @description احصل على قائمة المكونات المتدهورة
* يشير @prarm SelectId1 إلى معرف القائمة المنسدلة للبرنامج
* معرف @prarm SelectId2 للقائمة المنسدلة للمكونات المتحللة
*/
الدالة getCpgjThgl(selectId1,selectId2){
var obj1=document.getElementById(selectId1);// القائمة المنسدلة للبرامج المرجعية
var obj2=document.getElementById(selectId2);// إنشاء القائمة المنسدلة للمكونات
var len=obj1.options.length;
// عندما يساوي طول قائمة البرامج المشار إليها 1، يتم إرجاعها دون إجراء أي عملية.
إذا (لين==1){
عودة كاذبة.
}
// امسح قيمة القائمة المنسدلة، كلا الطريقتين متاحتان
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;i<len; i++){
خيار فار = obj1.options[i];
// لا تتم إضافة العناصر المحددة المشار إليها بواسطة البرنامج
إذا(i!=obj1.selectedIndex){
// استنساخ الخيار وإضافته إلى SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}
كود HTML:
انسخ رمز الكود كما يلي:
<TABLE border=0 align="left" cellPadding=0 cellSpacing=1>
<تر>
<td> <span>*</span>برنامج الاقتباس:</td>
<TD>
<اسم الإدخال = "yyrjMc" معرف = "yyrjMc" نوع = "نص" tabindex = "3" حجم = "30" >
<اسم الإدخال = "yyrjDm" id = "yyrjDm" type = "مخفي" >
<نوع الإدخال = "زر"
onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="Select...">
</TD>
</tr>
<تر>
<td> <span>*</span>إصدار عرض الأسعار:</td>
<td معرف = "yyfb">
<select name="yyfbDm" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">
</حدد>
</TD>
</tr>
<تر>
<td>المكونات المنحلة:</td>
<td معرف = "thgj">
<حدد الاسم = "thgjDm" id = "thgjDm">
<option value="-1" Selected>لا شيء</option>
</حدد>
</TD>
</tr>
</الجدول>