แท็ก select
แท็ก select สร้างรายการดรอปดาวน์
เพื่อใช้ใน ฟอร์ม HTML
แต่ละรายการในลิสต์ควรอยู่ใน
แท็ก option
แอตทริบิวต์
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
multiple |
การมีแอตทริบิวต์นี้จะสร้าง มัลติซีเลกต์ -
รายการดรอปดาวน์ที่สามารถเลือกได้หลายรายการ โดยกดค้างปุ่ม
Ctrl หรือเลือกด้วยเมาส์
แอตทริบิวต์ที่ไม่จำเป็น |
name |
ชื่อของรายการดรอปดาวน์ จำเป็นสำหรับ การดึงข้อมูลของฟิลด์ใน PHP เพื่อให้ฟอร์มทำงานได้อย่างถูกต้อง ชื่อของฟิลด์ ไม่ควรซ้ำกัน (ในฟอร์มเดียวกัน) หากชื่อซ้ำกัน - ข้อมูลใน PHP จะมาจากฟิลด์ ที่อยู่ล่างกว่าในโค้ด HTML |
ตัวอย่าง
มาดูกันว่ารายการดรอปดาวน์ทำงานอย่างไร:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
ตัวอย่าง
ลองกำหนดความกว้างของรายการดรอปดาวน์ให้
เท่ากับความกว้างของรายการที่ใหญ่ที่สุด (หาก
ไม่ได้ระบุความกว้างไว้อย่างชัดเจนด้วยคุณสมบัติ CSS
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
ตัวอย่าง . การเลือกค่าเริ่มต้น
ทีนี้ลองเลือกเมือง
เป็นค่าเริ่มต้นบ้าง มาทำกันด้วยแอตทริบิวต์
selected:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
ตัวอย่าง . มัลติซีเลกต์
ทีนี้ลองเปลี่ยนซีเลกต์ธรรมดาเป็น
มัลติซีเลกต์ด้วยแอตทริบิวต์ multiple:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
โปรดสังเกตว่าชื่อของซีเลกต์ที่กำหนดในแอตทริบิวต์ name
ควรลงท้ายด้วยวงเล็บเหลี่ยม [] ซึ่งจำเป็นเพื่อให้ใน PHP
ได้รับค่าทั้งหมดที่ถูกเลือก (มิฉะนั้นจะได้รับเพียงค่าเดียว - ค่าสุดท้าย)
ตัวอย่าง . ค่าเริ่มต้นหลายค่าในมัลติซีเลกต์
ทีนี้ ในมัลติซีเลกต์ ลอง เลือกมากกว่าหนึ่งค่าเป็นค่าเริ่มต้น:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
:
