แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

เพื่อน ๆ กำลังตามหา ฐานข้อมูล จังหวัด อำเภอ ตำบล กันอยู่หรือป่าว ดูเพลินเรามีแจกนะ นอกจากนี้เรายังมีตัวอย่าง การสร้าง Dropdown เลือก จังหวัด อำเภอ ตำบล ด้วยใช้งาน Javascript function และ Jquery Ajax อัพเดท option อัตโนมัติมาให้เพื่อน ๆ ได้ Download ไปใช้กันอีกด้วย

คลิกที่นี่ เพื่อ Download source code

หลังจาก Download code มาแล้ว คุณจะได้ไฟล์ออกแบบแบบนี้

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

ตัวอย่างการเขียน Dropdown จังหวัด อำเภอ ตำบล แบบอัตโนมัติด้วย jQuery Ajax

โค้ดตัวอย่างโค้ดที่คุณได้ Download มานั้นเป็นภาษา PHP แต่ไม่ต้องกังวลไป เพราะเรามี SQL ตัวอย่างให้กับคุณแล้ว เพียงแต่คุณเปลี่ยนรูปแบบการดึงข้อมูลจากภาษา PHP เป็นภาษาที่คุณต้องการ นอกจากนี้ โค้ดสำหรับสร้าง Dropdown ส่วนใหญ่ก็เป็น Javascript และ HTML

คุณต้องทำการ Import 3 ไฟล์นี้เข้า Database ก่อน

ไฟล์สำหรับควบคุม Dropdown ทั้ง 3 ตัวคือไฟล์นี้

<script src="service/province.service.js" type="text/javascript"></script>

ไฟล์ชุดนี้ ใช้สำหรับคุม Search box ของ Dropdown

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

ตัวอย่างอื่น ๆ คุณสามารถอ่านได้เองจากไฟล์ที่คุณ Download ไปได้เลย ดังนี้

1. index.html คือตัวอย่างไฟล์ Template
2. service/province.service.js คือไฟล์ที่ควบ Jquery และ Ajax function
3. service/ajax.province.php คือไฟล์สำหรับดึงข้อมูลรายชื่อจังหวัดจาก Database แล้วส่ง Respone ไปหา javascript
4. service/ajax.district.php คือไฟล์สำหรับดึงข้อมูลรายชื่ออำเภอจาก Database แล้วส่ง Respone ไปหา javascript
5. service/ajax.subdistricte.php คือไฟล์สำหรับดึงข้อมูลรายชื่อตำบลจาก Database แล้วส่ง Respone ไปหา javascript

เป็นยังไงกันบ้างคะ ไม่ยากเลยใช่ไหมละสำหรับเทคนิคการเขียน Dropdown จังหวัด อำเภอ ตำบล ด้วย  jQuery Ajax ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

เทคนิค วิธีการ Set Delay ให้กับ Function Javascript

ดูเพลิน Admin - 26 ม.ค. 66
Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Javascript เทคนิค Check & Get ค่า Hash จาก URL

Javascript เทคนิค Check & Get ค่า Hash จาก URL

ดูเพลิน Admin - 26 ม.ค. 66
Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ URL pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4