การทำ 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

18 Comments

  1. ลองทำแล้วออกแค่ 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);

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

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

    1. บทความนี้ ยังไม่ได้สอนเรื่องบันทึกเข้าฐานข้อมูลนะครับ

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

    1. จะเขียน ไว้ที่ไฟล์เดิมก็ได้ครับ แต่ต้องสร้าง ไฟล์ php ใหม่นะครับ

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

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

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

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

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

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

    ]

Leave a Reply

Your email address will not be published. Required fields are marked *

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