لیست های کشویی

خلاصه ی چند نکته ی مهم درمورد لیست های کشویی Html به همراه مثال

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

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

استفاده از تگ پایانی </option> اختیاری است .

نمونه کد :

<select name="MyList">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
<option value="value 4">گزینه چهارم</option>
</select>

پیش نمایش :

گزینه اول گزینه دوم گزینه سوم گزینه چهارم

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

name :

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

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

"multiple="multiple :
در صورتی که این شناسه به تگ <select> اضافه شود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند. همچنین میتوان فقط کلمه multiple را به تگ اضافه کرد .

"disabled="disabled :

این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند. در این مورد نیز میتوان فقط کلمه disabled را به تگ اضافه کرد . (بدون اینکه به آن مقداری بدهیم)

---

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

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

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

---

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

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

---

مثال درمورد لیست های کشویی:

رفتن به صفحه مورد نظر با انتخاب یکی از گزینه های لیست با استفاده از دکمه Button

1- کد جاوا اسکریپت زیر را در قسمت head صفحه وارد کنید :

<script>
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
</script>

2- کد زیر را در قسمت body وارد کنید :

<form>
<select name="choice" size="1">
<option value="">My List ...</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.fc-perspolis.com">FC Perspoils</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.ebay.com">eBay</option>
<option value="http://www.amazon.com">Amazon</option>
</select>
<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">
</form>

پیش نمایش :

My List ... YahooFC PerspoilsGoogleeBayAmazon

منبع

نکات :

نکته 1- با اضافه کردن عبارت blank_* به آخر لینک ها ،  اون لینک در تب جدید باز میشه ، مثال :

<option value="http://www.fc-perspolis.com*_blank">FC Perspoils</option>

میتونیم بجای blank_ ، اگه از frame توی صفحمون استفاده کردیم ، نام اون فریم رو وارد کنیم تا لینک توی اون فریم باز بشه .

نکته 2-

فریم چیست ؟ به طور خیلی خیلی خلاصه برای نمایش دادن یک صفحه html در داخل یک صفحه ی دیگه ، از فریم استفاده میشه .

مثال ساده :

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

کد :

<a href="http://itzenderood.blogsky.com" target="myframe">
وبلاگ دانشجویان آیتی دانشگاه اصفهان
</a>
<br />
<br />
<center>
<iframe width="350" height="200" frameborder="1" name="myframe">
</iframe>
</center>

اگه روی لینک زیر کلیک کنید ، صفحه توی فریم زیر باز میشه :

پیش نمایش :

وبلاگ دانشجویان آیتی دانشگاه اصفهان

نکته ی مهم ، همنام بودن محل باز شدن لینک با نام فریمه .

مهم ترین شناسه های تگ فریم ، name و src هستند . با افزودن شناسه src و دادن یک آدرس به آن ،  آدرس موجود توی src ، درون فریم باز میشه .

آشنایی بیشتر با فریم ها : اینجا

پس فرض کنید بخواهیم در مثال بالا ، سایت یاهو توی همون پنجره ، سایت گوگل توی یه صفحه جدید و سایت fc-perspolis.com توی فریمی که زیرش ساختیم باز بشه . کد قسمت body بالا رو بصورت زیر تغییر میدیم :

<form>
<select name="choice" size="1">
<option value="">My List ... </option>
<option value="http://www.yahoo.com*_blank">Yahoo</option>
<option value="http://www.fc-perspolis.com*mynewframe">
FC Perspoils</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.ebay.com">eBay</option>
<option value="http://www.amazon.com">Amazon</option>
</select>
<input TYPE="button" VALUE="GO!" onClick="jump(this.form)">
</form>
<br />
<br />
<center>
<iframe width="350" height="250" scrolling="no" frameborder="1" name="mynewframe" />

پیش نمایش :

My List ... YahooFC PerspoilsGoogleeBayAmazon

نکته 3- شناسه  scrolling="no" در تگ <iframe>، باعث حذف Scroll bar از فریم میشه .

نکته 4- اگه بخوایم بدون استفاده از دکمه button ، با انتخاب یک گزینه از لیست کشویی ، مستقیم به اون آدرس وارد بشیم بجای کد body در قسمت بالا از کد زیر استفاده می کنیم .

یعنی بجای استفاده از Button ، از رویداد onChange توی تگ <select> استفاده می کنیم :

<form>
<select name="choice" size="1" onChange="jump(this.form)">
<option value="">My List ... </option>
<option value="http://www.yahoo.com*_blank">Yahoo</option>
<option value="http://www.fc-perspolis.com*mynewframe">
FC Perspoils</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.ebay.com">eBay</option>
<option value="http://www.amazon.com">Amazon</option>
</select>
</form>
<br />
<br />
<center>
<iframe width="350" height="250" scrolling="no" frameborder="1" name="mynewframe" />