لیست های کشویی (Select)

لیست های کشویی بیش تر در فرم ها کاربرد دارند ، یه مثال ساده  در بعضی از فرم ها در انتخاب شهر مورد نظرتون حتماً لیست کشویی رو دیده اید که به این صورته   اصفهاناهوازالبرزبیرجندتبریزتهرانکرمانزنجانقم

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

در اینجا می تونید قطعه کدی که باعث ساخته شدن لیست کشویی بالا شده رو ببینید :

<select name=”list” >

<option value=”esfahan” >اصفهان </option>

<option value=”ahvaz” > اهواز</option> 

<option value=”alborz” >البرز </option>

<option value=”birjand” >بیرجند </option>

<option value=”tabriz” > تبریز</option>

<option value=”tehran” >تهران </option> 

<option value=”kerman” > کرمان</option>

<option value=”zanjan” >زنجان </option> 

<option value=”qom” >قم </option> 

</select>

با انتخاب هر یک گزینه های موجود در لیست و کلیک بر روی دکمه ارسال فرم ، مقدار مربوط به آن گزینه به صفحه action ارسال می شود . از شناسه های زیر می تونید در تگ <select> استفاده کنید :

name :

این شناسه برای اختصاص دادن یک نام برای لیست کشویی مورد استفاده قرار می گیرد .

size :

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

“multiple=”multiple :

اگر این شناسه را به تگ <select> اضافه کنیم کاربر می تواند بیش از یک گزینه از گزینه های موجود در لیست را انتخاب کند .

“disabled=”disabled :

این شناسه لیست را برای کاربر غیرفعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن را ندارند .

وارد کردن گزینه ها به لیست با تگ <option>

همان طور که در بالا هم گفتم برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم . با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم ، گزینه انتخاب شده توسط کاربر را تشخیص دهیم . برای تگ <option> هم می توانیم از شناسه های زیر استفاده کنیم  :

value :

این شناسه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود .

“selected=”selected :

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

دسته بندی گزینه های لیست های کشویی با استفاده از  <optgroup>

اگر یک لیست کشویی طولانی دارید می توانید برای آسان شدن انتخاب کاربر گزینه های مرتبط را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشد . برای این کار باید از تگ <optgroup>  استفاده کنیم . با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/> قرار دهید . کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند :

<select name=”list” size=”5″ multiple=”multiple”>

<optgroup label=”عنوان گروه اول” >

<option value=”esfahan” >اصفهان </option>

<option value=”ahvaz” > اهواز</option> 

<option value=”alborz” >البرز </option>

</optgroup>

<optgroup label=”عنوان گروه دوم” >

<option value=”birjand” >بیرجند </option>

<option value=”tabriz” > تبریز</option>

<option value=”tehran” >تهران </option> 

</optgroup>

<optgroup label=”عنوان گروه سوم”>

<option value=”kerman” > کرمان</option>

<option value=”zanjan” >زنجان </option> 

<option value=”qom” >قم </option> 

</optgroup>

</select>

نکته مهم : استفاده از شناسه زیر در تگ <optgroup> الزامی است :

label :

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