کار با منوهای کشویی (drop down)

منوهای کشویی، کاربردهای بسیاری در برنامه های تحت وب دارند. به کمک این منها میتوانیم به کاربر امکان دهیم از میان چند گزینه، یکی را انتخاب کند. و سپس بر حسب انتخابی که کرده است، عملیات بخصوصی برای او انجام گردد.
برای قرار دادن یک منوی کشویی روی صفحه از کد HTML زیر استفاده میکنیم:

<select name=”city”>
<option value=”0”> Isfahan
<option value=”1”> Tehran
<option value=”2”> Shiraz
<option value=”3”> Tabriz
</select>

اعمالی که میتوانیم بر روی این منوی کشویی انجام دهیم:

1- اضافه و حذف کردن عناصر

2- گرفتن عنصر انتخاب شده

3- تغییر عناصر به صورت پویا

اضافه و حذف کردن عناصر

برای اضافه کردن یک عنصر به لیست، باید ایتدا یک شیء از نوع option ایجاد کنیم:

پس از آن متن و مقدار مورد نظر خود را به شیء اضافه کنیم

opt.text=”Yazd”;
opt.value=”4”

در نهایت این شئ را به منوی مورد نظر خود اضافه نماییم

البته میتوانیم یک تابع به نام AddItem ایجاد نماییم که این کار را انجام دهد:

function AddItem(Text,Value)
{
var opt = document.createElement("option");
opt.text = Text;
opt.value = Value;
document.getElementById("DropDownList").options.add(opt); }

برای حذف یک عنصر نیز تنها کافی است تا با داشتن اندیس آن، از متد remove استفاده نماییم:

var Obj = document.getElementById(“ DropDownList “)
Obj.remove(1);

البته برای حذف همه عناصر میتوانیم از روش زیر استفاده کنیم:

در صورتی که بخواهیم متن عنصر بخصوصی را عوض کنیم، با داشتن اندیس آن عنصر میتوانیم به راحتی و با استفاده از کد زیر این کار را انجام دهیم:

var Obj = document.getElementById(“ DropDownList “)
Obj.options[2].text=”new text”;

گرفتن عنصر انتخاب شده

در بسیاری شرایط لازم است تا برحسب انتخابی که کاربر انجام داده است عملیات مختلفی صورت گیرد. مثلا فرض کنید که در یک منوی کشویی از کاربر خواسته ایم تا شهر محل سکونت خود را وارد کند. سپس بخواهیم در صورتی که شهر وی مثلا اصفهان است، او به سایت Isfahan.ir منتقل گردد.

ویژگی selectedIndex به ما میگوید که اندیس عنصر انتخاب شده چیست.

var Obj = document.getElementById(“ DropDownList “)
If (Obj.options[Obj.selectedIndex].text == ”Isfahan”)
window. location.href=”www.isfahan.ir”;