مجموعه‌ای از گزینه‌های انتخاب
تعریف و کاربرد
options مجموعه‌ای که تمام گزینه‌های لیست کشی را بازمی‌گرداند عنصر <option> مجموعه.}
توضیح:عناصر مجموعه بر اساس ترتیب ظاهر شدن آن‌ها در کد منبع مرتب شده‌اند.
مثال
مثال 1
تعداد گزینه‌ها در لیست کشویی خاصی را بررسی کنید:
var x = document.getElementById("mySelect").options.length;
نتیجه x خواهد بود:
4
توجه:مثال‌های بیشتری در پایین صفحه ارائه شده است.
جملات:
selectObject.options
خصوصیت
| خصوصیت | توضیح |
|---|---|
| length |
تعداد عناصر <option> در مجموعه را بازگرداند. توضیح:این خاصیت فقط خواندنی است |
| selectedIndex | شاخص <option> انتخاب شده در مجموعه را (از 0 شروع می‌شود) تنظیم یا بازگرداند. |
روش
| روش | توضیح |
|---|---|
| [index] |
عنصر <option> با شاخص مشخص شده (از 0 شروع می‌شود) از مجموعه بازگرداند. توضیح:در صورت اینکه شماره شاخص از محدوده خارج باشد، null برمی‌گرداند. |
| [add(option[,index)] | عنصر <option> را در موقعیت مشخص شده در مجموعه اضافه کنید. اگر شاخص مشخص نشده باشد، گزینه در انتهای مجموعه قرار می‌گیرد. |
| item(index) |
عنصر <option> با شاخص مشخص شده (از 0 شروع می‌شود) از مجموعه بازگرداند. توضیح:در صورت اینکه شماره شاخص از محدوده خارج باشد، null برمی‌گرداند. |
| namedItem(id) |
از مجموعه عناصر <option> با ID مشخص شده بازگرداند. توضیح:اگر 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 خواهد بود:
Apple
مثال 3: item(index)
متن اولین گزینه در لیست کشویی (شاخص 0) را دریافت کنید:
var x = document.getElementById("mySelect").options.item(0).text;
نتیجه x خواهد بود:
Apple
مثال 4: namedItem(id)
متن گزینه با id="orange" در لیست کشویی را دریافت کنید:
var x = document.getElementById("mySelect").options.namedItem("orange").text;
نتیجه x خواهد بود:
Orange
در موقعیت شماره لیست کشویی
var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
گزینه با شماره
var x = document.getElementById("mySelect"); x.options.remove(1);مثال 7
به هر گزینه در لیست جعبه انتخاب بروید و متن هر گزینه را چاپ کنید:
var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x.options[i].text + "<br>";
}
نتیجه x خواهد بود:
Apple Orange Pineapple Banana
مثال 8
یک گزینه را در لیست جعبه انتخاب انتخاب کنید و متن گزینه انتخاب شده را در عنصر با id="demo" چاپ کنید:
var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;
نتیجه x خواهد بود:
Banana
مثال 9
برای تغییر گزینه‌های لیست جعبه انتخاب با توجه به گزینه انتخاب شده در لیست دیگر تغییر دهید:
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
اگر (cars) {
var i;
برای (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
