การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL

บทความนี้เป็นการสอนการทำ Dropdown 3 ชั้น โดยใช้เทคนิค Ajax ในการช่วยเพื่อให้หน้าเว็บไปต้องรีเฟส โดยขั้นตอนการทำงานเริ่มจากเลือกจังหวัด เมื่อเลือกจังหวัดแล้ว Dropdown ชั้นที่ 2 จะมีรายชื่ออำเภอของจังหวัดที่เลือกเท่านั้น หลังจากนั้นเมื่อเราเลือกอำเภอ Dropdown ชั้นที่ 3 จะมีรายชื่อตำบลของอำเภอที่เราเลือก จะเห็นได้ว่าทั้งหมดนี้เราใช้ ภาษา PHP + MySQL (เทคนิค Ajax) เท่านั้น ซึ่งทางผู้เขียนจะอธิบายขั้นตอนของ code เพื่อให้ผู้อ่านเข้าใจได้ง่ายขึ้น

เดโม่ตัวอย่าง

เครื่องมือพัฒนา

1. XAMPP สำหรับจำลองเครื่องเราเป็น SERVER ให้ใช้เวอร์ชั่นล่าสุด (ที่ใช้ php 7 ขึ้นไป)
2. VSCODE ใช้ในการเขียนโปรแกรม

ขั้นตอน

1. ดาวน์โหลดฐานข้อมูลมาก่อน สามารถดาวน์โหลดได้ที่ Click to Download อ้างอิงจาก https://github.com/parsilver/thailand-provinces
2. หลังจากนั้นทำการสร้าง database ชื่อ thailand แล้วทำการ Import SQL โดยใช้ PHPMyAdmin
3 สร้างโปรเจค multiple_dropdown ไว้ใน c:\xampp\htdocs\
4. สร้างไฟล์ connect.php เพื่อเชื่อมต่อฐานข้อมูล code ตัวอย่างด้านล่าง

5. สร้างไฟล์ index.php เพื่อสร้าง html และทำ multiple dropdown ดู code ตัวอย่างด้านล่าง

คำอธิบาย Code

บรรทัด 1-5 เป็นการเชื่อต่อฐานข้อมูลและดึงข้อมูลจังหวัดมา (province)


บรรทัด 22-31 เป็นการนำข้อมูลจังหวัดที่ได้ จากบรรทัด 1-5 มาแสดงในหน้าจอ


บรรทัด 32-43 เป็นการใส่ dropdown อำเภอ, ตำบล แต่ยังไม่มีข้อมูล จนกว่า เราจะเลือกจังหวัด ซึ่งเราจะนำ javascript มาจับ Event หน้าจอ เพื่อเรียกใช้งาน ajax แล้วนำข้อมูล อำเภอ, ตำบล มาใส่ตามลำดับ


บรรทัด 51 เป็นการเรียกใช้ไฟล์ script.js โดย file นี้มีความสำคัญในการ จัดการ AJAX

6. สร้างไฟล์ script.js ไว้ที่โฟล์เดอร์ assets เพื่อใช้สำหรับ เวลาเราเปลี่ยนแปลง จังหวัดหรืออำเภอ ให้ทำการ ดึงข้อมูล มาใหม่

อธิบาย Code

บรรทัด 2-4 สร้างตัวแปรเพื่อเก็บ Element Selector ของ Dropdown จังหวัด, อำเภอ, ตำบล


บรรทัด 7-21
– เมื่อมีการเปลี่ยนแปลง Dropdown (เลือกจังหวัด) จะทำการ Clear ข้อมูล อำเภอ, ตำบล ตามบรรทัด 10-11
– หลังจากนั้น จะทำการใช้ GET ของ jQuery ยิง Request ไปที่ get_amphure.php เพื่อดึงข้อมูลอำเภอมา โดยใส่ข้อมูลตัวแปร จังหวัดที่เลือกไปด้วยเพื่อดึงอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น ตัวแปรชื่อ provicne_id ตามบรรทัดที่ 13
– หลังจากยิง Request ไปที่ server แล้ว Server จะตอบกลับมาเป็นข้อมูลรายการของอำเภอจากจังหวัดที่เลือกใน Dropdown รูปแบบของการตอบกลับเป็น JSON ดังนั้นเราต้องทำการ parse data ก่อน ตามบรรทัด 14
– เมื่อ parse data แล้วข้อมูลจะอยู่ในรูปแบบนี้

– ให้เราใช้คำสั่ง jQuery Append ข้อมูลลงใน HTML โดยข้อมูลมาเป็น Array ให้ทำการวนข้อมูล โดยใส่ value คือ item.id และ name คือ item.name_th ตามบรรทัด 17 


บรรทัด 24-37 เป็นการดึงข้อมูลตำบลของอำเภอที่เราเลือกมาแสดงบน HTML โดย Event จะทำงานเมื่อคลิกเปลี่ยนอำเภอใน Dropdown การทำงานจะคล้ายกับ การเปลี่ยนจังหวัด แต่แตกต่างที่ ไฟล์ที่ดึงข้อมูลต้องเปลี่ยนเป็น get_district.php และ ตัวแปรที่ส่งไปเป็นตัวแปรของอำเภอที่ถูกเลือก และสุดท้าย ตอนได้รับข้อมูลจาก Server มาก็นำมาวนใส่ ใน Dropdown ตำบล ก็เป็นอันจบการทำงาน

7. สร้างไฟล์ get_amphure.php เพื่อดึงข้อมูล อำเภอ จากจังหวัดที่เลือกมา ดู code ตัวอย่างด้านล่าง

อธิบาย Code
เมื่อ ไฟล์ script.js request ขอข้อมูลจาก server โดยเรียกใช้ไฟล์ get_amphure.php และส่งตัวแปร province_id มาด้วย เป็นตัวแปร ได้จากการเลือกจังหวัด

บรรทัด 1 เชื่อมต่อฐานข้อมูล
บรรทัด 2-3 ดึงข้อมูลเอารายการอำเภอ จากจังหวัดที่เลือก โดย where province_id
บรรทัด 6-9 ดึงข้อมูลแล้วทำการ วนเก็บข้อมูลอำเภอ ไว้ใน $json ในรูปแบบ Array
บรรทัด 10 ทำการแปลงข้อมูล Array ไปเป็น JSON เพิ่มเตรียมส่งกลับไปให้กลับ Client ที่เรียกใช้(script.js)

8. สร้างไฟล์ get_district.php เพื่อดึงข้อมูล ตำบล จากอำเภอที่เลือกมา ดู code ตัวอย่างด้านล่าง

อธิบาย Code
การทำงานคล้ายกับไฟล์ get_amphure.php แตกต่างกันในเรื่องของการดึงข้อมูลคนละตารางเท่านั้น และตัวแปรที่ใช้การ where เป็น amphure_id

ผลลัพท์

ดาวน์โหลด

สามารถดาวน์โหลด Code เต็มๆ หรือ clone code มาดูได้ที่ลิงค์ https://github.com/ipball/multiple_dropdown

สรุป

สำหรับบทความนี้ ผู้เขียนคิดว่า หลายๆคนน่าจะเข้าใจหลักการทำงาน ของ Client – Server มองเห็นภาพการทำงานชัดเจนในทำงานของโปรแกรม ซึ่งในปี 2020 อาจจะหลายๆคนบอกว่า ยังใช้ jQuery อยู่อีกเหรอ ยังใช้ PHP อยู่อีกเหรอ?

จริงๆแล้วไม่ว่าเราจะใช้ภาษาอะไรหรือเทคโนโลยีอะไรก็ตามแต่ เราจงหาสิ่งที่เราถนัดและเหมาะสมกับงาน แต่ไม่ได้หมายความว่าจะให้ทุกคนจะต้องใช้ PHP ตลอด เราก็ควรศึกษาเรียนรู้ภาษา เทคโนโลยีใหม่ด้วย เช่นกัน เหมือนกับผู้เขียนที่ยังต้องเขียน Node.js, ExpressJS, MongoDB, Angular อยู่เลย เราเป็นนักพัฒนา เราก็ต้องศึกษาพัฒนาตัวเองอยู่สม่ำเสมอ

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

23 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
2 years ago

[…] ตอนนี้มีบทความ การทำ listbox/dropdown แบบ 3 ชั้นแล้ว ละเอียดกว่าเดิม คลิกเพื่อดู […]

prati
prati
2 years ago

ลองทำแล้วออกแค่ 2 ชั้น ไม่ทราบว่าติดตรงไหน รบกวนดูให้หน่อยนะคะ

// on change group
sectionObject.on(‘change’, function(){
var sectionId = $(this).val();

groupObject.html(‘เลือกสถาน/ศูนย์/นิคม’);
$.get(‘getgroup.php?secID=’ + sectionId, function(data){
var result = JSON.parse(data);
$.each(result, function(index, item){
sectionObject.append(
$(”).val(item.id).html(item.groupname)
);
});
});
});
});

<?php
include('connDB.php');
$sql = "SELECT * FROM group WHERE secID={$_GET['secID']}";
$query = mysqli_query($conn, $sql);

$json = array();
while($result = mysqli_fetch_assoc($query)) {
array_push($json, $result);
}
echo json_encode($json);

zellermoon
zellermoon
Reply to  benext
2 years ago

ไม่ได้เหมือนกันออกแค่ชั้นเดียวเอง มันฟ้องว่าตรง index ไม่ได้ใช้งาน

Jetsada
2 years ago

ถ้าจะเปลี่ยนค่าที่เก็บเข้าฐานข้อมูลต้องเปลี่ยนตรงไหนครับ เช่นออยากเก็บข้อมูลตำบลเป็นชื่อแทน ID

TNP
TNP
2 years ago

ถ้าจะนำไปใช้ในกรณี update ต้องเขียนไฟล์ js ใหม่ หรือ เพิ่มโค้ดตรงไหนครับ คือพอกดแก้ไขแล้วค่าเก่าไม่ขึ้นให้ครับ ขอบคุณครับ

Yelly
Yelly
Reply to  benext
1 year ago

มีตัวอย่างโค้ดของส่วนนี้ไหมครับ พอดีลองทำแล้วค่าเก่าไม่ขึ้นครับ

pesatsura
pesatsura
2 years ago

เยี่ยม

nani
nani
2 years ago

ถ้าจะเพิ่มรหัสไปรษณีย์ด้วยทำยังไงครับ

่atity
่atity
2 years ago

ตามตัวอย่างมันจะทำงานก็ต่อเมื่อมี event onchange เท่านั้น ถ้าจะให้รองรับกรณีมีการบันทึกข้อมุลแล้วดึงข้อมุลมาแก้ไขจะต้องเพิ่มและปรับตรงไหนคะ

U2M
U2M
2 years ago

กราบขอบพระคุณครับ รอดตายเเล้ววว

NP
NP
1 year ago

ขอโทษนะครับ พอดีลองทำ edit แล้วข้อมูลเดิมไม่ขึ้นต้องแก้ไขส่วนไหนครับ ขอบคุณครับ

NP
NP
Reply to  benext
1 year ago

ขั้นตอนนี้ลองทำได้แล้วครับแต่ในส่วนของ update ยังมีปัญหาอยู่ครับ

Alice
1 year ago

[
{
“id”:1,
“name_th”: “ห้างฉัตร”,
“province_id”: 324 <—————– ค่าที่ส่งมาตรงนี้เปลี่ยนเป็นตัวหนังสือแทนได้ไหมครับผมลองทำแล้วมันไม่ออก ออกเฉพาะตัวเลข ครับ
},
{},

]

BNZ
BNZ
1 year ago

อยากเพิ่มรหัสไปรษณีด้วยต้องทำไงครับ

ieankung
ieankung
Reply to  BNZ
3 months ago

(1) เพิ่ม Code ต่อไปนี้ในหน้าหลัก ต่อจากบรรทัด </div> ของ Dropdown เลือกตำบล
<div class=”form-group col-md-4″>
            <label for=”zip”>รหัสไปรษณีย์</label>
            <select name=”zip_id” id=”zip” class=”form-control”>
              <option value=””>เลือกรหัสไปรษณีย์</option>
            </select>
          </div>

(2) เพิ่ม Code ต่อไปนี้ในไฟล์ script.js ก่อน }); บรรทัดสุดท้าย
// on change district
districtObject.on(‘change’, function() {
    var districtId = $(this).val();
    zipObject.html(‘<option value=””>เลือกรหัสไปรษณีย์</option>’);
    $.get(‘get_zip.php?district_id=’ + districtId, function(data) {
      var result = JSON.parse(data);
      $.each(result, function(index, item) {
        zipObject.append(
          $(‘<option></option>’).val(item.id).html(item.zip_code)
        );
      });
    });
  });

*สังเกตว่าเมื่อเสร็จสิ้นแล้ว ตอนสุดท้ายจะมี }); 4 บรรทัด จึงจะถูกต้อง

(3) สร้างไฟล์ get_zip.php โดยมี code ดังนี้

<?php
include(‘connect.php’);
$sql = “SELECT * FROM districts WHERE id={$_GET[‘district_id’]}”;
$query = mysqli_query($conn, $sql);
$json = array();
while($result = mysqli_fetch_assoc($query)) {   
array_push($json, $result);
}
echo json_encode($json);

ผลลัพธ์จะทำให้เราได้ช่อง “เลือกรหัสไปรษณีย์” เพิ่มขึ้นมา โดยจะแสดงรหัสไปรษณีย์ของตำบลที่เราเลือกเท่านั้น

*ไฟล์ get_amphure.php , get_district.php และ get_zip.php ต้องเก็บไว้ในโฟลเดอร์ asset
**อย่าลืมตรวจสอบการเข้าถึงฐานข้อมูลให้ถูกต้อง

***ขอขอบคุณ คุณ benext ผู้เขียนบทความที่ช่วยจุดประกายให้ต่อยอดได้ด้วยนะครับ

ieankung
ieankung
Reply to  BNZ
3 months ago

ขออภัยครับ มึน ๆ เลยพิมพ์ผิด ขอแก้ไขดังนี้ครับ

*ไฟล์ get_amphure.php , get_district.php และ get_zip.php ต้องเก็บไว้ในโฟลเดอร์เดียวกันกับไฟล์หลักนะครับ

mrao
mrao
10 months ago

สุดยอดครับ จะลองเอามาปรับใช้ดู
อยากให้แจกโค้ดปฏิทินเชื่อมโยงฐานข้อมูล แบบ WordPress ด้วยครับ

Phairard
Phairard
4 months ago

ขอบคุณมากครับ อธิบายได้ชัดเจน