Site icon บริษัท โค๊ดบี จำกัด

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

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

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

<h2>Dropdown จังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย jQuery Plugin<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>Dropdown จังหวัด เลือกอัตโนมัติ<&sol;strong><&sol;p>&NewLine;<h4>ตัวอย่างการทำงาน<&sol;h4>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;autoprovince&sol;" target&equals;"&lowbar;blank">เลือกจังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย AutoProvince&period;js<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p>สำหรับการพัฒนาเว็บไซต์โดยเฉพาะเว็บแอพพลิเคชั่นที่ต้องมีแบบฟอร์มให้กรอกข้อมูลต่าง ๆ ข้อมูลที่มักจะต้องมีอยู่ใน<br &sol;>&NewLine;แบบฟอร์มให้ผู้ใช้งานระบุ คือข้อมูลที่ให้เลือก จังหวัด อำเภอ ตำบล เรียกได้ว่าแทบจะมีอยู่ในทุกแบบฟอร์มเลยที่เดียว<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>ในการพัฒนาฟอร์มข้อมูลแบบนี้ ส่วนใหญ่วิธีที่ได้รับความนิยมและทำกันก็คือการติดตั้งฐานข้อมูลจังหวัดทั้ง 77 จังหวัด<br &sol;>&NewLine;ของประเทศไทย และใช้ php ในการ query ข้อมูลก่อนที่จะใช้ jquery เพื่อโหลดข้อมูลตามการเลือกของผู้ใช้งาน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;แต่วันนี้จะนำเสนอ jQuery Plugin ที่สามารถทำงานได้เหมือนระบบที่ได้อธิบายไว้ข้างต้น เพียงแต่เปลี่ยนจาก<br &sol;>&NewLine;ฐานข้อมูล MySQL มาเป็น xml แทน ทำให้สามารถใช้งานได้โดยไม่ต้องติดตั้งฐานข้อมูล ท่านสามารถดูตัวอย่าง<br &sol;>&NewLine;และโหลดไปใช้งานได้เลย จุดเด่นของ plugin คือทำให้ลดการ query ข้อมูลจากฐานข้อมูล เพราะเมื่อใช้<br &sol;>&NewLine;ข้อมูลเป็น xml จะเป็นการโหลดข้อมูลเพียงครั้งเดียวเท่านั้น<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ข้อดีของ AutoProvince&period;js<&sol;h4>&NewLine;<ul>&NewLine;<li>เป็น jQuery Plugin ติดตั้งใช้งานง่าย<&sol;li>&NewLine;<li>ไม่ต้องติดตั้งฐานข้อมูล โหลดไปใช้งานได้เลย เพราะใช้ข้อมูลเป็น xml<&sol;li>&NewLine;<li>สามารถจัดเรียงรายชื่อแบบต้นฉบับหรือแบบตามตัวอักษรได้<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างการทำงาน<&sol;h4>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;autoprovince&sol;" target&equals;"&lowbar;blank">เลือกจังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย AutoProvince&period;js<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>AutoProvince Version 1&period;3 &lpar; Comming Soon &rpar;<&sol;strong><&sol;p>&NewLine;<p>&plus; เพิ่มการแสดงชื่อจังหวัดอำเภอตำบลเป็นภาษาอังกฤษ<&sol;p>&NewLine;<p><strong>AutoProvince Version 1&period;2 &lpar; beta &rpar;<&sol;strong><&sol;p>&NewLine;<p>&plus; เปลี่ยนฐานข้อมูลประเทศไทยเป็นฐานข้อมูลตัวล่าสุด &lpar; ครบถ้วนจังหวัด อำเภอ ตำบล รหัสไปรษณีย์ &rpar;<&sol;p>&NewLine;<p>&plus; เปลี่ยนฐานข้อมูลจากเวอร์ชั่นเดิมจาก xml มาใช้เป็น json ทำให้สามารถปรับแก้ฐานข้อมูลได้ง่ายขึ้น<&sol;p>&NewLine;<p>&plus; แก้ไขโค๊ดคำสั่งหลักในการค้นหา จังหวัด อำเภอ ตำบลที่เลือก เพิ่มความเร็วในการประมวลผล<&sol;p>&NewLine;<p>&plus; เพิ่มความสามารถในการระบุ ภาค &lpar; Geography &rpar; ของจังหวัดที่เลือก<&sol;p>&NewLine;<p><strong>AutoProvince Version 1&period;0<&sol;strong><&sol;p>&NewLine;<p>&plus; ใช้ xml เป็นฐานข้อมูล<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างการใช้งาน<&sol;h4>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างการใช้งานสำหรับ Javascript jQuery<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"ตัวอย่างการเลือกจังหวัด อำเภอ ด้วย jQuery" > &NewLine;&dollar;&lpar;'body'&rpar;&period;AutoProvince&lpar;&lbrace; &NewLine;&Tab;PROVINCE&colon;&Tab;&Tab;'&num;province'&comma; &sol;&sol; select div สำหรับรายชื่อจังหวัด &NewLine;&Tab;AMPHUR&colon;&Tab;&Tab;&Tab;'&num;amphur'&comma; &sol;&sol; select div สำหรับรายชื่ออำเภอ &NewLine;&Tab;DISTRICT&colon;&Tab;&Tab;'&num;district'&comma; &sol;&sol; select div สำหรับรายชื่อตำบล &NewLine;&Tab;POSTCODE&colon;&Tab;&Tab;'&num;postcode'&comma; &sol;&sol; input field สำหรับรายชื่อรหัสไปรษณีย์ &NewLine;&Tab;arrangeByName&colon;&Tab;&Tab;false &sol;&sol; กำหนดให้เรียงตามตัวอักษร &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างการใช้งานในไฟล์ html<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;tr&gt&semi; &NewLine; &lt&semi;td&gt&semi;อำเภอ &colon; &lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;&lt&semi;select id&equals;"province"&gt&semi; &NewLine; &lt&semi;option&gt&semi;- กรุณาเลือกจังหวัด -&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;&sol;select&gt&semi;&lt&semi;&sol;td&gt&semi; &NewLine;&lt&semi;&sol;tr&gt&semi; &NewLine;&lt&semi;tr&gt&semi; &NewLine; &lt&semi;td&gt&semi;จังหวัด &colon; &lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;&lt&semi;select id&equals;"amphur"&gt&semi; &NewLine; &lt&semi;option&gt&semi;- กรุณาเลือกอำเภอ -&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;&sol;select&gt&semi;&lt&semi;&sol;td&gt&semi; &NewLine;&lt&semi;&sol;tr&gt&semi; &NewLine;&lt&semi;tr&gt&semi; &NewLine; &lt&semi;td&gt&semi;ตำบล &colon; &lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;&lt&semi;select id&equals;"district"&gt&semi; &NewLine; &lt&semi;option&gt&semi;- กรุณาเลือกตำบล -&lt&semi;&sol;option&gt&semi; &NewLine; &lt&semi;&sol;select&gt&semi;&lt&semi;&sol;td&gt&semi; &NewLine;&lt&semi;&sol;tr&gt&semi; &NewLine;&lt&semi;tr&gt&semi; &NewLine; &lt&semi;td&gt&semi;รหัสไปรษณีย์ &colon; &lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;&lt&semi;input id&equals;"postcode"&sol;&gt&semi;&lt&semi;&sol;td&gt&semi; &NewLine;&lt&semi;&sol;tr&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ดาวน์โหลดไฟล์ตัวอย่าง<&sol;h4>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;autoprovince&sol;autoprovince&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลด AutoProvince&period;js<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p>AutoProvince&period;js เป็นการพัฒนา jQuery Plugin โดยทีมพัฒนาของบริษัท โค๊ดบี จำกัด ท่านนักพัฒนาเว็บไซต์ทั้งหลาย<br &sol;>&NewLine;สามารถนำไปใช้ได้โดยไม่ต้องแจ้งกับทางบริษัท ฐานข้อมูล xml จังหวัดในประเทศไทยทั้งหมด ต้องขอขอบคุณนักพัฒนา<br &sol;>&NewLine;สมาชิกจากเว็บไซต์ thaicreate&period;com ตามกระทู้ด้านล่าง<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;thaicreate&period;com&sol;free-web-script&sol;thailand-province-database&period;html" target&equals;"&lowbar;blank">http&colon;&sol;&sol;www&period;thaicreate&period;com&sol;free-web-script&sol;thailand-province-database&period;html<&sol;a><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีอัพเดทข้อมูลใหม่ กรณีที่มีการตั้งตำบล อำเภอ จังหวัดใหม่<&sol;h4>&NewLine;<p>แนะนำเพิ่มเติมสำหรับการเปลี่ยนข้อมูลใน xml ไฟล์ ในกรณีที่ข้อมูล ตำบล อำเภอ จังหวัด ของไทยมีการเปลี่ยนแปลง เช่น อาจจะมีจังหวัดใหม่เพิ่มเข้ามาหรือมีการเปลี่ยนสถานะของตำบลเป็นอำเภอ เป็นต้น วิธีเปลี่ยนข้อมูลก็ง่าย ๆ เลยครับ คือให้หาข้อมูล database ตัวใหม่และ import เข้าไปในฐานข้อมูล จากนั้นก็เลือก export เป็นไฟล์ &period;xml เท่านั้น เราก็จะได้ข้อมูล ตำบล อำเภอ จังหวัด และรหัสไปรษณีย์ที่เป็นข้อมูลล่าสุดแล้ว<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;

Exit mobile version