شئSelect كه مرتبط به عنصري از نوع<select> ميشود ، داراي يك مجموعه ازاشياء Optionكه مرتبط با عناصر نوع <option> ميباشند .مجموعه گزينه ها،مجموعه اي از تمام عناصر<option> را در يك ليست كشوئي برميگرداند .
مثال ـ پيدا نمودن تعداد گزينه هاي ليست كشوئي
var x = document.getElementById("mySelect").options.length;
توجه ـ عناصر موجود در مجموعه ، همانوريكه در كد منبع تعريف شده اند، ظاهر ميشوند.
ويژگي | شرح |
---|---|
length | تعداد عناصر گرينه را در ليست كشوئي برگشت ميدهد. |
selectedIndex | انديس عنصر<option> انتجابي را تنظيم ويا برگشت ميدهد . |
متد | شرح |
---|---|
[index] | گزييه را با انديس مشخص برگشت ميدهد.
انديس از صفر شروع ميشود. |
[add(opion,[,index])] | گزينه اي را در انديس مشخص شده به ليست كشوئي اضافه ميكند.
اگر انديس مشخص نگردد بانتها اضافه ميشود. |
item(index) | گزينه اي باانديس مشخص از ليست كشوئي برگشت ميدهد.
اگر انديس خارج از محدوده باشدnull برگشت ميشود . |
namedItem(id) | گزينه باid مشخص شده اي را از ليست كشوئي برگشت ميدهد .
اگر شناسه گزينه وجود نداشته باشدnull برگشت ميشود . |
remove(index) | گزينه باانديس مشخص را از ليست حذف ميكند. |
مثال ـ[index] دريافت متن اولين گزينه يعني انديس صفر كه نتيجه برگشتي Appleاست
var x = document.getElementById("mySelect").options[0].text;
مثال ـitem(item) كه دريافت متن اولين گزينه
var x = document.getElementById("mySelect").options.item(0).text;
دومتد فوق داراي دو فرمت مختلف ولي داراي عملكرد مشابه
مثال ـnamedItem(id) دريافت متن گزينه اي با شناسه مشخص
var x = document.getElementById("mySelect").options.namedItem("orange").text;
مثال ـ اضافه نمودن گرينه"Kiwi" در انديس يك
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);
مثال ـ ايجاد حلقه براي دريافت متن تمام گزينه هاي ليست كشوئي
var x = document.getElementById("mySelect"); var txt = ""; var i; for (i = 0; i < x.length; i++) { txt = txt + x.options[i].text + "<br>"; }
Apple Orange Pineapple Banana
مثال ـ يگ گزينه از ليست كشوئي انتحاب كنيد وسپس متن آنرا به گزينهid="demo" منتقل نماييد.
var x = document.getElementById("mySelect"); var i = x.selectedIndex; document.getElementById("demo").innerHTML = x.options[i].text;
مثال ـ بسته به گزينه انتخاب شده درليست كشوئي ديكري،گزينه موجوددر يك ليست كشوئي را تغيير دهيد.
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]; if (cars) { var i; for (i = 0; i < cars.length; i++) { var car = new Option(cars[i], i); modelList.options.add(car); } } }