โดยวันนี้เราจะใช้ภาษา PHP และ javascript(jQuery) ในการทำงานนั้นเอง โดยใช้เทคนิค AJAX ตอนดึงข้อมูลมาใส่ใน dropdown 2, 3 เดี่ยวมาดูกันว่าเขียนอย่างไรบ้างในบทความนี้

วิธีการเขียน Multiple Dropdown

1. ทำการ import database ของฐานข้อมูล จังหวัด, อำเภอ, ตำบล ลงในฐานข้อมูลก่อน ดาวน์โหลดได้ที่
   https://github.com/ipball/multiple_dropdown2025/blob/main/multiple_dropdown.sql
2. ทำการสร้างไฟล์ conect.php เพื่อเชื่อมต่อกับฐานข้อมูล

3. สร้างไฟล์ index.php เพื่อทำหน้าจอ dropdown จังหวัด, อำเภอ, ตำบล และ ช่อง input text รหัสไปรณีย์

อธิบายโค๊ด

บรรทัดที่ 2 include ไฟล์เพื่อเชื่อมต่อฐานข้อมูล
บรรทัดที่ 4-10 ดึงข้อมูลจากตารางจังหวัด แล้ววนข้อมูลเก็บใส่ตัวแปร $provinces เพื่อที่จะนำไปวนลูปใน dropdown
บรรทัดที่ 28-35 เป็น dropdown ของจังหวัด นำตัวแปรจาก บรรทัดข้างบนมา วนแสดงผล จังหวัด
บรรทัดที่ 37-52 เป็นฟอร์มของ อำเภอ, ตำบล, รหัสไปรษณีย์ ยังไม่มีค่าใดๆ เพราะต้องรอให้เลือก dropdown จังหวัดก่อน ในส่วนนี้
บรรทัดที่ 56-57 include ไฟล์สำคัญคือ jquery มาใส่งาน, และไฟล์ script.js เป็นไฟล์ที่เราจะเขียนขึ้นเพื่อหาจังหวะตอนเลือกเปลี่ยน ค่า dropdown

4. สร้างไฟล์ script.js เพื่อจับเหตุการ์ณและดึงข้อมูลแสดงผล อำเภอ, ตำบล, รหัสไปรษณีย์

อธิบายโค๊ด

บรรทัดที่ 2-24 เมื่อมีการเปลี่ยนแปลง dropdown จังหวัด จะทำการ reset ค่าของ อำเภอ, ตำบล, รหัสไปรษณีย์ แล้วทำการดึงข้อมูลอำเภอ ตามจังหวัดที่เลือกใน dropdown นั้น ด้วย jquery AJAX จากไฟล์ get_districts.php (เราจะสร้างทีหลัง) ซึ่งพอเราดึงค่าข้อมูลจากไฟล์ได้แล้วจะได้ข้อมูล รุปแบบ JSON ให้เราทำการวนข้อมูลแล้ว ลูปอำเภอ นำมาใส่ใน element dropdown ของอำเภอ
บรรทัดที่ 26-47 เมื่อเปลี่ยนแปลง dropdown อำเภอ ทำการ reset ค่า ตำบล, รหัสไปรษณีย์ แล้วดึงข้อมูลตำบล ตามอำเภอที่เลือก ด้วย jquery AJAX จากไฟล์ get_subdistricts.php แล้วเอาข้อมูลที่ได้รับเป็น JSON วนลูปใส่ใน dropdown ตำบล
บรรทัดที่ 49-52 เมื่อมีการเปลี่ยนแปลง ตำบล เราจะเอาข้อมูลรหัสไปรษณีย์ที่อยู่ data-postcode มาใส่ในช่องรหัสไปรษณีย์

5. สร้างไฟล์ get_districts.php เพื่อดึงข้อมูลอำเภอตามจังหวัดที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON

6. สร้างไฟล์ get_subdistricts.php เพื่อดึงข้อมูลตำบลตามอำเภอที่เลือกแล้วส่งข้อมูลออกกลับไปเป็น JSON

เพียงเท่านี้เราก็ได้ Multiple Dropdown List แบบหลายชั้นแล้ว เดี่ยวเราลองมาดูผลลัพท์กัน

สำหรับ Source code Multiple Dropdown List โดยใช้ PHP, MySQL, Javascript(Jquery) สามารถดาวน์โหลดได้ที่ลิงค์ด้านล่าง
ดาวน์โหลด Source Code กดตรงนี้

The post Dynamic Dropdown หลายชั้นด้วย PHP+Ajax first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.

Bootstrap datepicker เป็น plugin ที่ใช้สำหรับการเลือกวันที่ในแบบฟอร์มของเว็บไซต์ ซึ่งใช้งานได้ง่าย และสามารถปรับแต่งตามความต้องการได้หลากหลาย

ในการเรียกใช้งาน Bootstrap datepicker คุณจะต้องมีการติดตั้ง Bootstrap และ datepicker ก่อน ซึ่งคุณสามารถดาวน์โหลดไฟล์ตัวอย่างของ Bootstrap จากเว็บไซต์ของ Bootstrap หรือเรียกใช้งานโดยใช้ CDN ส่วน datepicker สามารถดาวน์โหลดจากเว็บไซต์ของ Bootstrap Datepicker แล้วเพิ่มไฟล์ที่ต้องการเข้าสู่โปรเจคของคุณ เช่น ไฟล์ CSS สำหรับรูปแบบ และไฟล์ JavaScript สำหรับการทำงานของ datepicker

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

หลังจากนั้นคุณสามารถเขียน JavaScript เพื่อเรียกใช้ datepicker โดยใช้คำสั่ง .datepicker() ซึ่งจะถูกเรียกใช้กับอิลิเมนต์ที่กำหนดไว้ เช่น ปุ่มหรือฟิลด์ข้อมูลวันที่ ตัวอย่างการเขียน JavaScript ดังนี้:

$(document).ready(function() {
  $('#date').datepicker();
});

ในตัวอย่างนี้ คำสั่ง .datepicker() จะถูกเรียกใช้กับอิลิเมนต์ที่มี ID ชื่อ “date” คำสั่ง .ready จะทำหน้าที่เรียกใช้งาน datepicker เมื่อหน้าเว็บโหลดเสร็จสมบูรณ์

นอกจากนี้คุณยังสามารถกำหนดค่าต่างๆ เพื่อปรับแต่ง datepicker ได้ เช่น รูปแบบของวันที่ที่จะแสดง ช่วงของวันที ที่สามารถเลือกได้ และฟังก์ชันการเลือกวันที่ เช่น การเลือกวันที่เมื่อคลิกปุ่ม หรือการแสดงข้อความแจ้งเตือนเมื่อวันที่ถูกเลือก ซึ่งคุณสามารถกำหนดค่านี้โดยการใช้คำสั่ง .datepicker() พร้อมกับอาร์กิวเมนต์ของค่าที่ต้องการกำหนด ตัวอย่างการกำหนดค่าต่างๆ ดังนี้

$(document).ready(function() {
  $('#date').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '01/01/2010',
    endDate: '31/12/2022',
    todayBtn: 'linked',
    todayHighlight: true,
    autoclose: true
  });
});

คำอธิบายในตัวอย่างนี้
format: ‘dd/mm/yyyy’ คือ กำหนดรูปแบบของวันที่เป็น ‘dd/mm/yyyy’
startDate: ’01/01/2010′, endDate: ’31/12/2022′ คือ กำหนดช่วงของวันที่ที่สามารถเลือกได้ จากวันที่ 1 มกราคม 2010 ถึง 31 ธันวาคม 2022
todayBtn: ‘linked’ คือ กำหนดปุ่ม “Today” เมื่อคลิกแล้วให้กรอกวันที่ปัจจุบันให้ในช่อง input
todayHighlight: true คือ กำหนดสีไฮไลท์วันที่ปัจจุบัน
autoclose: true คือ กำหนดให้ datepicker ปิดอัตโนมัติเมื่อเลือกวันที่แล้ว

ลองมาดูตัวอย่าง code Bootstrap Datepicker แบบเต็มๆกันครับ

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="datepicker">เลือกวันที่:</label>
      <input type="text" class="form-control" id="date">
    </div>
  </form>
</body>
</html>

JavaScript:

$(document).ready(function() {
  $('#date').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '01/01/2010',
    endDate: '12/31/2020',
    todayBtn: 'linked',
    todayHighlight: true,
    autoclose: true
  });
});

ผลลัพท์ของ bootstrap datepicker

หากคุณมีข้อสงสัยหรือคำถามสามารถถามได้ในคอมเม้นนี้

ขอบคุณครับ

The post การใช้งาน Bootstrap Datepicker เพื่อแสดงวันที่ปฏิทินให้สวยงาม first appeared on itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี.