ایجاد لیست کشویی در html

💬سوال: ایجاد لیست کشویی در HTML

برای ایجاد لیست کشویی در HTML از تگ select استفاده می‌شود. این تگ شامل دو بخش است:

1. تگ select: این تگ برای تعریف لیست کشویی به کار می‌رود.
2. تگ option: این تگ برای تعریف هر یک از گزینه‌های لیست کشویی به کار می‌رود.

مثال:

نکات:

• ویژگی name: این ویژگی برای نام‌گذاری لیست کشویی به کار می‌رود.
• ویژگی value: این ویژگی برای تعیین مقدار هر یک از گزینه‌های لیست کشویی به کار می‌رود.
• گزینه پیش‌فرض: برای انتخاب یک گزینه به عنوان پیش‌فرض، می‌توانید از ویژگی selected استفاده کنید.

مثال:

ایجاد لیست کشویی با CSS

می‌توانید از CSS برای استایل‌دهی به لیست کشویی خود استفاده کنید. برای مثال، می‌توانید رنگ، اندازه و موقعیت لیست کشویی را تغییر دهید.

مثال:

select {
color: red;
font-size: 16px;
margin: 10px;
}

ایجاد لیست کشویی با JavaScript

می‌توانید از JavaScript برای اضافه کردن قابلیت‌های بیشتر به لیست کشویی خود استفاده کنید. برای مثال، می‌توانید لیست کشویی را به صورت پویا پر کنید یا به کاربر اجازه دهید تا گزینه‌های جدیدی به لیست اضافه کند.

مثال:

// پر کردن لیست کشویی به صورت پویا
const myList = document.getElementById("my_list");

for (let i = 1; i <= 10; i++) {
  const option = document.createElement("option");
  option.value = i;
  option.textContent = `گزینه ${i}`;

  myList.appendChild(option);
}