Dropdown จังหวัด เลือกอัตโนมัติ jQuery+xml Plugin

dropdown-เลือกจังหวัด
dropdown-เลือกจังหวัด

Dropdown จังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย jQuery Plugin



Dropdown จังหวัด เลือกอัตโนมัติ

ตัวอย่างการทำงาน

เลือกจังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย AutoProvince.js


สำหรับการพัฒนาเว็บไซต์โดยเฉพาะเว็บแอพพลิเคชั่นที่ต้องมีแบบฟอร์มให้กรอกข้อมูลต่าง ๆ ข้อมูลที่มักจะต้องมีอยู่ใน
แบบฟอร์มให้ผู้ใช้งานระบุ คือข้อมูลที่ให้เลือก จังหวัด อำเภอ ตำบล เรียกได้ว่าแทบจะมีอยู่ในทุกแบบฟอร์มเลยที่เดียว


ในการพัฒนาฟอร์มข้อมูลแบบนี้ ส่วนใหญ่วิธีที่ได้รับความนิยมและทำกันก็คือการติดตั้งฐานข้อมูลจังหวัดทั้ง 77 จังหวัด
ของประเทศไทย และใช้ php ในการ query ข้อมูลก่อนที่จะใช้ jquery เพื่อโหลดข้อมูลตามการเลือกของผู้ใช้งาน


แต่วันนี้จะนำเสนอ jQuery Plugin ที่สามารถทำงานได้เหมือนระบบที่ได้อธิบายไว้ข้างต้น เพียงแต่เปลี่ยนจาก
ฐานข้อมูล MySQL มาเป็น xml แทน ทำให้สามารถใช้งานได้โดยไม่ต้องติดตั้งฐานข้อมูล ท่านสามารถดูตัวอย่าง
และโหลดไปใช้งานได้เลย จุดเด่นของ plugin คือทำให้ลดการ query ข้อมูลจากฐานข้อมูล เพราะเมื่อใช้
ข้อมูลเป็น xml จะเป็นการโหลดข้อมูลเพียงครั้งเดียวเท่านั้น

ข้อดีของ AutoProvince.js

  • เป็น jQuery Plugin ติดตั้งใช้งานง่าย
  • ไม่ต้องติดตั้งฐานข้อมูล โหลดไปใช้งานได้เลย เพราะใช้ข้อมูลเป็น xml
  • สามารถจัดเรียงรายชื่อแบบต้นฉบับหรือแบบตามตัวอักษรได้


ตัวอย่างการทำงาน

เลือกจังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย AutoProvince.js



AutoProvince Version 1.3 ( Comming Soon )

+ เพิ่มการแสดงชื่อจังหวัดอำเภอตำบลเป็นภาษาอังกฤษ

AutoProvince Version 1.2 ( beta )

+ เปลี่ยนฐานข้อมูลประเทศไทยเป็นฐานข้อมูลตัวล่าสุด ( ครบถ้วนจังหวัด อำเภอ ตำบล รหัสไปรษณีย์ )

+ เปลี่ยนฐานข้อมูลจากเวอร์ชั่นเดิมจาก xml มาใช้เป็น json ทำให้สามารถปรับแก้ฐานข้อมูลได้ง่ายขึ้น

+ แก้ไขโค๊ดคำสั่งหลักในการค้นหา จังหวัด อำเภอ ตำบลที่เลือก เพิ่มความเร็วในการประมวลผล

+ เพิ่มความสามารถในการระบุ ภาค ( Geography ) ของจังหวัดที่เลือก

AutoProvince Version 1.0

+ ใช้ xml เป็นฐานข้อมูล

ตัวอย่างการใช้งาน



ตัวอย่างการใช้งานสำหรับ Javascript jQuery

$('body').AutoProvince({
	PROVINCE:		'#province', // select div สำหรับรายชื่อจังหวัด
	AMPHUR:			'#amphur', // select div สำหรับรายชื่ออำเภอ
	DISTRICT:		'#district', // select div สำหรับรายชื่อตำบล
	POSTCODE:		'#postcode', // input field สำหรับรายชื่อรหัสไปรษณีย์
	arrangeByName:		false // กำหนดให้เรียงตามตัวอักษร
});



ตัวอย่างการใช้งานในไฟล์ html

<tr>
  <td>อำเภอ : </td>
  <td><select id="province">
      <option>- กรุณาเลือกจังหวัด -</option>
    </select></td>
</tr>
<tr>
  <td>จังหวัด : </td>
  <td><select id="amphur">
      <option>- กรุณาเลือกอำเภอ -</option>
    </select></td>
</tr>
<tr>
  <td>ตำบล : </td>
  <td><select id="district">
      <option>- กรุณาเลือกตำบล -</option>
    </select></td>
</tr>
<tr>
  <td>รหัสไปรษณีย์ : </td>
  <td><input id="postcode"/></td>
</tr>


ดาวน์โหลดไฟล์ตัวอย่าง

ดาวน์โหลด AutoProvince.js


AutoProvince.js เป็นการพัฒนา jQuery Plugin โดยทีมพัฒนาของบริษัท โค๊ดบี จำกัด ท่านนักพัฒนาเว็บไซต์ทั้งหลาย
สามารถนำไปใช้ได้โดยไม่ต้องแจ้งกับทางบริษัท ฐานข้อมูล xml จังหวัดในประเทศไทยทั้งหมด ต้องขอขอบคุณนักพัฒนา
สมาชิกจากเว็บไซต์ thaicreate.com ตามกระทู้ด้านล่าง

http://www.thaicreate.com/free-web-script/thailand-province-database.html

วิธีอัพเดทข้อมูลใหม่ กรณีที่มีการตั้งตำบล อำเภอ จังหวัดใหม่

แนะนำเพิ่มเติมสำหรับการเปลี่ยนข้อมูลใน xml ไฟล์ ในกรณีที่ข้อมูล ตำบล อำเภอ จังหวัด ของไทยมีการเปลี่ยนแปลง เช่น อาจจะมีจังหวัดใหม่เพิ่มเข้ามาหรือมีการเปลี่ยนสถานะของตำบลเป็นอำเภอ เป็นต้น วิธีเปลี่ยนข้อมูลก็ง่าย ๆ เลยครับ คือให้หาข้อมูล database ตัวใหม่และ import เข้าไปในฐานข้อมูล จากนั้นก็เลือก export เป็นไฟล์ .xml เท่านั้น เราก็จะได้ข้อมูล ตำบล อำเภอ จังหวัด และรหัสไปรษณีย์ที่เป็นข้อมูลล่าสุดแล้ว