การเลือกจังหวัดโชว์อำเภอ เลือกอำเภอโชว์ตำบล เป็นการเลือกลักษณะที่เป็น Dependence Drop Down List โดยใช้คุณสมบัติ AJAX ซึ่งจะไม่ทำให้หน้าเว็บไซต์ Refresh เพื่อป้องกันข้อมูลหายในขณะที่กรอกฟอร์ม โดยในตัวอย่างนี้เป็นการเลือกจังหวัด แล้วจะมีรายการอำเภอในจังหวัดนั้นแสดงใน Drop Down List ของอำเภอ และเมื่อเรียกอำเภอก็จะมีรายการของตำบลนั้นแสดงใน Drop Down List ของตำบล จากนั้นเมื่อบันทึกข้อมูลในตารางก็จะเก็บเอาเพียงแค่ ID ของตำบลไปเก็บเท่านั้น
ก่อนอื่น ไปดู Data Dictionary หรือพจนานุกรมข้อมูลกันก่อนนะครับ ว่าโครงสร้างตารางนั้นเป็นอย่างไร
provinces
Table comments: จังหวัด
| Column | Type | Null | Default Comments |
| id | int(11) | No | |
| province_name | varchar(60) | No | ชื่อจังหวัด |
| province_name_en | varchar(60) | No | ชื่อจังหวัดอังกฤษ |
districts
Table comments: อำเภอ
| Column | Type | Null | Default Comments |
| id | int(11) | No | |
| province_id | int(11) | No | รหัสจังหวัด |
| district_name | varchar(60) | No | ชื่ออำเภอ |
tambons
Table comments: ตำบล
| Column | Type | Null | Default Comments |
| id | int(11) | No | |
| district_id | int(11) | No | รหัสอำเภอ |
| province_id | int(11) | No | รหัสจังหวัด |
| tambon_name | varchar(60) | No | ชื่อตำบล |
ในส่วนของ Controller ให้สร้างเรียกข้อมูลจังหวัดขึ้นมาก่อนครับ แล้วส่งให้ View เพื่อแสดงผลรายการของจังหวัด ส่งให้ View ผ่านตัวแปร $province
สร้าง Function เพิ่มเติมเพื่อเรียกข้อมูลเมื่อมีการเลือกจังหวัด โดยเลือกข้อมูลจาก ID จังหวัดที่ส่งมา
ในส่วนของ View ให้ทำการแสดงข้อมูล จังหวัดที่ส่งมาจาก Controller ผ่านตัวแปร $province โดยเมื่อมีการเลือกกรายการให้ส่งไปที่ Action loaddistrict จากนั้นส่งค่ากลับมาที่ #district
ในส่วนของ View ให้ทำการแสดงข้อมูล จังหวัดที่ส่งมาจาก Controller ผ่านตัวแปร $province โดยเมื่อมีการเลือกกรายการให้ส่งไปที่ Action loaddistrict จากนั้นส่งค่ากลับมาที่ #district
เมื่อมีการเลือกรายการอำเภอให้ส่งไปที่ Action loadsubdistrict จากนั้นส่งค่ากลับมาที่ #subdistrict
สุดท้ายก็จะสามารถเลือกรายการของตำบลได้
เรียก URL เพื่อทดสอบ จะเห็นการแสดงผลดังนี้
เมื่อทดลองเลือกจังหวัด จะโชว์รายการอำเภอในจังหวัดนั้น และเมื่อเรียกอำเภอในจังหวัดนั้นจะโชว์รายการตำบลในอำเภอที่เลือกนั้น ดังนี้
ความคิดเห็น