لیست کشویی Drop-down list

لیست کشویی یا Drop-down list چیست؟

لیست کشویی یا لیست پایین افتادنی (Drop-down list) که با نام منوی کشویی (Drop-down menu) نیز شناخته می‌شود یکی از انواع ویجت های رابط کاربری گرافیکی است که به کاربر اجازه می‌دهد در میان لیستی از گزینه ها یک مقدار را انتخاب کند.

از این نوع المان معمولا در مواقعی استفاده می‌شود که قرار است از میان تعدادی گزینه مرتبط تنها یک مقدار انتخاب شود. هرچند چنین رفتاری با کمک دکمه های رادیویی نیز قابل پیاده سازی است اما معمولا لیست های کشویی امکان انتخاب از میان تعداد آیتم های بیشتر را در فضایی کوچک‌تر فراهم می‌کنند. به عبارت بهتر دکمه های رادیویی اغلب برای انتخاب از میان تعدادی گزینه محدود و انگشت شمار به کار می‌روند.

لیست های پایین افتادنی مشابه با لیست باکس (List box) ها برای انتخاب مقدار از یک لیست به کار می‌روند. با این تفاوت که در Drop-down ها تنها یک مقدار قابل انتخاب می‌باشد و در حالت عادی (بسته یا غیرفعال)، تنها همین آیتم انتخاب شده نمایش داده می‌شود؛ درنتیجه این المان ها در مقایسه با یک لیست چند عنصری معمولی فضای کمتری در حالت بسته اشغال می‌کنند. این در حالیست که لیست باکس ها برای انتخاب چند گزینه هم قابل استفاده هستند و آیتم ها را در قالب یک لیست قابل اسکرول نمایش می‌دهند.

همچنین می‌توانید لیست های کشویی را به عنوان نوعی Combo box بدون فیلد متنی قابل ویرایش در نظر بگیرید. به عبارت بهتر Combo box ترکیبی از یک Drop-down list و یک Text box قابل ویرایش تک خطی است که به کاربر اجازه می‌دهد مقداری دلخواه را در آن وارد نماید یا یکی از گزینه های موجود در لیست را انتخاب کند.

ظاهر و نحوه تعامل با لیست های کشویی

در حالت بسته، لیست کشویی شامل یک نماد فلش رو به پایین و یک مقدار است که نمایانگر آیتم انتخاب شده می‌باشد. با کلیک روی این المان یا لمس آن، لیست تمام آیتم های قابل انتخاب به کاربر نمایش داده می‌شود.

برای انتخاب یک مقدار یا تغییر مقدار انتخاب شده فعلی در این المان ها می‌توانید از روش‌های رایج زیر استفاده کنید:

• ابتدا روی لیست کشویی کلیک کنید (یا در صفحه نمایش های لمسی آن را لمس نمایید) تا آیتم های لیست نمایش داده شود. سپس از میان این آیتم ها روی گزینه موردنظر کلیک کنید یا آن را لمس نمایید. در این حالت، لیست کشویی مجددا بسته می‌شود و تنها آیتم انتخاب شده جدید نمایش داده می‌شود.
• در حالتی که لیست کشویی دارای فوکس و در حالت بسته می‌باشد می‌توانید با فشردن کلیدهای پیکانی بالا و پایین در همان حالت بسته میان آیتم‌های موجود در لیست گردش کنید. به این ترتیب که با فشردن کلید پیکانی رو به بالا، آیتمی که بالای آیتم انتخاب شده فعلی قرار دارد انتخاب می‌شود و با فشردن کلید پیکانی رو به پایین، آیتم پایین آیتم فعلی انتخاب می‌شود.

لیست های کشویی در HTML

برای ایجاد یک Drop-down list در HTML از المان <select> مشابه با مثال زیر استفاده می‌شود.

<form action="/action_page.php">
  <label for="pets">Please choose your favorite pet:</label>
  <select name="pets" id="pets">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="parrot">Parrot</option>
    <option value="fish">Fish</option>
    <option value="turtle">Turtle</option>    
    <option value="hamster">Hamster</option>    
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

ویژگی name

ویژگی name در تگ <select> برای تعیین نام داده های متناظر که هنگام سابمیت برای سرور ارسال می‌شود به کار می‌رود. در مثال فوق، تگ <select> دارای مقدار “pets” برای این خاصیت می‌باشد.

تگ <option>

المان های <option> که در داخل تگ <select> قرار گرفته‌اند برای تعیین گزینه های قابل انتخاب لیست استفاده می‌شوند. در مثال بالا از شش المان <option> برای ایجاد لیستی حاوی نام شش حیوان خانگی استفاده شده است.

ویژگی value در تگ <option>

توجه داشته باشید مقدار منتسب به value در تگ های <option> در حالت عادی به کاربر نمایش داده نمی‌شود. این مقدار در واقع همان چیزی است که در صورت انتخاب شدن گزینه متناظر، هنگام سابمیت کردن همراه با نام المان به شکل name=value برای سرور ارسال می‌شود.

برای نمونه اگر آپشن اول در مثال بالا انتخاب شده باشد اطلاعات فرم سابمیت شده شامل عبارت pets=cat خواهد بود. توجه داشته باشید اگر value برای یک آپشن مشخص نشده باشد متن داخل المان <option> به عنوان مقدار پیشفرض برای آن درنظر گرفته می‌شود.

تگ <label>

در مثال فوق برای مشخص کردن برچسب لیست کشویی از تگ <label> استفاده شده است. برای انتساب این لیبل به لیست کشویی، مقدار خصوصیت for در این المان مساوی با مقدار خصوصیت id اختصاص داده شده برای تگ <select> خواهد بود.

کاربر با کلیک روی این لیبل می‌تواند لیست را در حالت فعال (یا دارای فوکس) قرار دهد. همین‌طور اسکرین ریدرها هم متن لیبل را برای کاربر می‌خوانند.

انتخاب گزینه پیشفرض برای یک لیست کشویی در HTML

به صورت پیشفرض اولین آیتم در یک لیست کشویی به عنوان آیتم انتخاب شده نمایش داده می‌شود. با اینحال برای اینکه یک گزینه به صورت پیشفرض انتخاب شود می‌توانید خاصیت selected را به تگ <option> موردنظر اضافه کنید.

<option value="dog" selected>Dog</option>

تگ <optgroup>

با قرار دادن المان های <option> در داخل تگ های <optgroup> می‌توانید گزینه های موجود در Drop-down list را گروه بندی کنید. در این حالت، نام هر گروه با اختصاص یک متن به خاصیت label در تگ <optgroup> مشخص می‌شود.

<select name="pets" id="pets">
  <optgroup label="Common pets">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="parrot">Parrot</option>
    <option value="fish">Fish</option>
  </optgroup>
  <optgroup label="Unusual pets">
    <option value="turtle">Turtle</option>    
    <option value="hamster">Hamster</option> 
  </optgroup>
</select>

نتیجه این گروه‌بندی را می‌توانید در تصویر زیر مشاهده کنید. توجه داشته باشید نام گروه ها به عنوان یک گزینه قابل انتخاب نیستند.