تگ select در HTML
مثال (تگ select در HTML)
یک لیست drop-down برای چهار options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
خودتان امتحان کنید »
تعریف و کاربرد تگ select در HTML
تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.
تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.
پشتیبانی مرورگرها از تگ select در HTML
| عنصر | |||||
|---|---|---|---|---|---|
| <select> | بله | بله | بله | بله | بله |
نکته ها و ترفندها
نکته: عنصر <select> برای کنترل فرم است، و در یک فرم می تواند برای جمع آوری ورودی کاربر استفاده شود.
تفاوت بین HTML 4.01 و HTML5
برخی از خصوصیت های جدید در HTML5 اضافه شده است.
خصوصیت ها
= جدید در HTML5.
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| autofocus | autofocus | مشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد. |
| disabled | disabled | مشخص می کند که لیست drop-down باید غیر فعال باشد. |
| form | form_id | فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند. |
| multiple | multiple | مشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد. |
| name | name | یک name برای لیست drop-down تعریف می کند. |
| required | required | مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد. |
| size | number | تعداد مقادیر قابل مشاهده در لیست را مشخص می کند. |
ویژگی های عمومی تگ select در HTML
تگ <select> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ select در HTML
تگ <select> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ select در JavaScript
- نوشته شده توسط سمیه فخری
- بازدید: 20194
دیدگاه‌ها
با عرض سلام و تشکر بابت آموزش ها شما
من چطور می توانم کاری بکنم که کاربر وقتی می خواهد از لیست کشویی آیتمی را انتخاب کند با کلیک در منوی select وارد یک صفحه کوچک بشود و لبست آکاردئونی را باز کرده و انتخاب کند و با کلیک بر روی لیست به منوی select برود و آن آیتم لیست در منوی selectثبت شود ومن چگونه می توانم لیست آکاردئونی را در آن text box قرار دهم.
مثلا مانند سایت شیپور برای ثبت کالا
تشکر برای زحماتی که می کشید.
سلام
برای اینکه به هریک از option ها یک لینک بدهیم که کاربر وقتی منوی کشویی رو باز کرد و یکی از گزینه ها رو انتخاب کرد بدون کار دیگه ای به لینک اون گزینه بره.
تشکر از شما
با سلام.
درون خود تگ نمی تونید از تگ لینک استفاده کنید.
برای اینکار باید یه مقدار کوچولو از جاوااسکریپت کمک بگیرید. به این صورت که با استفاده از روال رویداد onchange به کنترل بگید که با انتخاب یک گزینه کار خاصی که در اینجا رفتن به صفحه دیگه هست رو انجام بده.
کد زیر نیاز شما رو برطرف خواهد کرد:
<select name="sele ct" onchange=" location.href = this.value;">
<option value="http://experthome.ir">experthome.ir</option>
<option value="http://irexpert.ir">irexpert.ir</option>
</select>
سلام
من یک تگ select ایجاد کرده ام با چند option
چطور می توان بوسیله کد jquery مقدار پیشفرض آن را تغییر دهم
با تشکر
سلام
به یکی از دو روش زیر، می توان بوسیله jQuery گزینه های تگ Select را تنظیم کرد:
1- متد val $('#drp_beyamooz').val('2');
2- متد attr$('#drp_beyamooz option[value="4"]').attr("selected",true);
لطفاً به مثال زیر توجه کنید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_set_default_option
تگ select مگه drop down نیست پس چرا وقتی تعداد زیادی option داخلس میذاریم تو chrom به طرف بالای صفحه باز میشه جای اینکه به طرف پایین بازشه یعنی drop up میشه!! قابل اصلاح هست این مشکل؟
بستگی داره فضای بیشتری در بالا داشته باشه یا در پایین. این مشکل نیست.
سلام
ایا امکان استایل دهی به تگ option وجود داره؟ به صورت پیش فرض وقتی موس روی هر ایتم میاد رنگش ابی میشه!! میشه تغییرش داد؟
در حال حاضر این امکان وجود نداره.