Basic Dynamic Dropdown With JSON

Dynamic Dropdown With JSON เป็นตัวอย่างการแสดงข้อมูล DropDown หลักและย่อยที่สัมพันธ์กัน ด้วย JSON อย่างง่ายๆนะครับ ในตัวอย่างนี้ขอสร้างชุดข้อมูล JSON ไว้ในตัวแปร JSONdata แต่ในการใช้งานจริงอาจจะ Load ข้อมูลจาก Database แล้วรับ Response ข้อมูลมาก็ได้ครับ

ในตัวอย่างนี้จะสร้าง DropdownList ขึ้นมา 2 อัน คือ ddlCountry สำหรับแสดงข้อมูลประเทศ และ ddlCity สำหรับแสดงข้อมูลเมือง เมื่อ ddlCountry มีการเปลี่ยนแปลงค่า ข้อมูล ddlCity จะมีการเปลี่ยนแปลงสัมพันธ์กัน


1.สร้างโปรเจค WebApplication

2.สร้าง Dropdown List ขึ้นมา 2 อัน คือ ddlCountry และ ddlCity

3.จากนั้นเขียน Javascript ในจังหวะ Page Load ในที่นี้จะกำหนดให้ ddlCity แสดงข้อความว่า select your city และมีสถานะเป็น Disabled

4.กำหนดข้อมูล JSON โดยประกอบด้วยประเทศ และเมือง

5.กำหนดฟังก์ชั่น Change ให้กับ ddlCountry ทำงานโดยนำ Value ของ ddlCountry มาตรวจสอบเพื่อดึงข้อมูลเมืองที่เกี่ยวข้องกับประเทศขึ้นมา จากนั้นก็นำมาแสดงบน ddlCity

6. เมื่อทำงาน ddlCity จะแสดงข้อมูลเมืองสัมพันธ์กับประเทศที่ผู้ใช้เลือก

ถ้ายังไม่ได้เลือกข้อมูลประทศที่ ddlCountry ระบบจะไม่แสดงข้อมูลเมืองที่ ddlCity รวมถึง Control นี้จะถูก disabled ไว้ด้วย