กรณีตัวอย่าง การสร้าง Drop Down List เลือกจังหวัดโชว์อำเภอ เลือกอำเภอโชว์ตำบล แบบ Dependence (AJAX)

wave
มานพ กองอุ่น 2 พ.ค. 2016, 18:16:20 5,873

การเลือกจังหวัดโชว์อำเภอ เลือกอำเภอโชว์ตำบล เป็นการเลือกลักษณะที่เป็น 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 เพื่อทดสอบ จะเห็นการแสดงผลดังนี้

เมื่อทดลองเลือกจังหวัด จะโชว์รายการอำเภอในจังหวัดนั้น และเมื่อเรียกอำเภอในจังหวัดนั้นจะโชว์รายการตำบลในอำเภอที่เลือกนั้น ดังนี้


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 5,873
  • รักเลย 0
  • หมวดหมู่ Tip Yii Framework (Yii1)
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags yii
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009

เนื้อหาที่เกี่ยวข้อง