مجموعة اختيارات Select

مثل Select DOM HTML

التعريف والاستخدام

خيارات المجموعة تعود بجميع خيارات القائمة المنسدلة <option> العنصر المجموعة.

ملاحظة:عناصر المجموعة مرتبة حسب تتابع ظهورها في الكود المصدر.

المثال

مثال 1

النظر في عدد الخيارات في القائمة المنسدلة المحددة:

var x = document.getElementById("mySelect").options.length;

جربها بنفسك

نتيجة _x_ ستكون:

4

إشارة:تقدم الصفحة أدناه أمثلة إضافية.

النص النحوي

selectObject.options

خاصية

خاصية الوصف
length

العودة إلى عدد عناصر <option> في المجموعة.

ملاحظة:هذه الخاصية غير قابلة للتعديل
selectedIndex تعيين أو العودة إلى الرقم المرجعي للخيار المحدد في المجموعة (بدءًا من 0).

الطريقة

الطريقة الوصف
[index]

من المجموعة العودة إلى عنصر <option> المحدد بناءً على الرقم المرجعي (بدءًا من 0).

ملاحظة:إذا كان الرقم المرجعي للسلسل خارج النطاق، يتم العودة إلى null.
[add(option[,index] إضافة عنصر <option> إلى المجموعة في الموقع المرجعي المحدد. إذا لم يتم تحديد الموقع المرجعي، يتم إدراجه في نهاية المجموعة.
item(index)

من المجموعة العودة إلى عنصر <option> المحدد بناءً على الرقم المرجعي (بدءًا من 0).

ملاحظة:إذا كان الرقم المرجعي للسلسل خارج النطاق، يتم العودة إلى null.
namedItem(id)

من المجموعة العودة إلى عنصر <option> المحدد بناءً على السلسل المرجعي.

ملاحظة:إذا id إذا لم يكن موجودًا، يتم العودة إلى null.
remove(index) إزالة عنصر <option> من المجموعة بناءً على سلسل المرجعي المحدد.

تفاصيل التقنية

إصدار DOM: Core Level 2 Document Object
القيمة المعدة:

مجموعة HTMLOptionsCollection، تمثل جميع عناصر <option> في عناصر <select>.

عناصر المجموعة مرتبة حسب تتابع ظهورها في الكود المصدر.

مزيد من الأمثلة

مثال 2: [index]

الحصول على نص الخيار الأول في القائمة المنسدلة (السلسل المرجعي 0):

var x = document.getElementById("mySelect").options[0].text;

جربها بنفسك

نتيجة _x_ ستكون:

تفاح

مثال 3: item(index)

الحصول على نص الخيار الأول في القائمة المنسدلة (السلسل المرجعي 0):

var x = document.getElementById("mySelect").options.item(0).text;

جربها بنفسك

نتيجة _x_ ستكون:

تفاح

مثال 4: namedItem(id)

الحصول على النص لخيار id="orange" في القائمة المنسدلة:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

جربها بنفسك

نتيجة _x_ ستكون:

أصفر

في موقع التسلسل المرجعي للقائمة المنسدلة

على_مثال_x = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("mySelect");
على_مثال_c = وثيقة_المستند.إنشاء_عنصر_خيار();
c.النص = "كمثرى";
x.الخيارات.إضافة(c, 1);

جربها بنفسك

مثال_6

حذف_النقطة_المحددة_بالمسلسل_1_من_القائمة_المنسوخة:

على_مثال_x = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("mySelect"); x.الخيارات.حذف(1);

جربها بنفسك

مثال_7

التحقق_من_القائمة_المنسوخة_بشكل_دائري، واعرض_النص_للكل_نقطة:

على_مثال_x = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("mySelect");
على_مثال_txt = "";
var i;
لـ(i = 0; i < x.الطول; i++) {
  txt = txt + x.الخيارات[x.الاختيار_المحدد].النص + "<br>";
}

جربها بنفسك

نتيجة _x_ ستكون:

تفاح
أصفر
موزي
موز

مثال_8

اختر_نقطةً من_القائمة_المنسوخة، واعرض_النص_المحدد_في_عنصر_ب_الاسم_اليدوي_"demo":

على_مثال_x = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("mySelect");
على_مثال_النقطة = x.الاختيار_المحدد;
وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("demo").النص_داخلي = x.الخيارات[x.الاختيار_المحدد].النص;

جربها بنفسك

نتيجة _x_ ستكون:

موز

مثال_9

تغيير_الخيارات_في_القائمة_المنسوخة_باختيار_النقطة_المحددة_في_القائمة_المنسوخة_الآخرى:

على_مثال_سيارات_و_نماذج = {};
سيارات_و_نماذج['VO'] = ['V70', 'XC60', 'XC90'];
سيارات_و_نماذج['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
سيارات_و_نماذج['BMW'] = ['M6', 'X5', 'Z3'];
دالة_تغيير_قائمة_السيارات() {
  على_مثال_قائمة_السيارات = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("car");
  على_مثال_نمذجة_القائمة = وثيقة_المستند.الحصول_على_عنصر_ب_الاسم("carmodel");
  على_مثال_سيارة = قائمة_السيارات.الخيارات[قائمة_السيارات.الاختيار_المحدد].القيمة;
  بينما_القائمة_المنسوخة.عدد_الخيارات > 0 {
    نمذجة_القائمة_المنسوخة.حذف(0);
  }
  على_مثال_سيارات = سيارات_و_نماذج[اختيار_سيارة];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

جربها بنفسك

دعم المتصفح جمعية خيارات نعم نعم نعم نعم نعم

مثل Select DOM HTML