เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ
ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน
https://www.ninenik.com/content.php?arti_id=572 via @ninenik
โดยมีการปรับเปลี่ยนรูปแบบการเรียกใช้ใหม่ให้ง่ายและ สะดวกยิ่งขึ้น
สามารถใช้แทนรูปแบบเดิมได้ เพราะรูปแบบใหม่นี้ จะรองรับกรณีแก้ไขข้อมูล
ในที่นี้เราจะใช้งาน data- attribute ของ html5 มาเป้นตัวกำหนดค่าของ
ข้อมูลเดิม
ยกตัวอย่าง เช่นเราเก็บช้อมูล
province_id ไอดีจังหวัด สมมติเท่ากับ 10
amphur_id ไอดีอำเภอ สมมติเท่ากับ 130
district_id ไอดีตำบล สมมติเท่ากับ 5
การกำหนดเรียกใช้งานหน้าเพิ่มข้อมูล ที่เราต้องเลือกจังหวัด อำเภอ และตำบลก็จะประมาณนี้
<select name="province_id" id="province_id" data-initval=""> <option value="">เลือกรายการ</option> </select> <br> <select name="amphur_id" id="amphur_id" data-initval=""> <option value="">เลือกรายการ</option> </select> <br> <select name="district_id" id="district_id" data-initval=""> <option value="">เลือกรายการ</option> </select>
และการกำหนดกรณีเรียกใช้งานหน้าแก้ไขข้อมูล เราก็เอาค่าของข้อมูลที่ได้บันทึกไว้มาแสดงใน data-initval ดังนี้
<select name="province_id" id="province_id" data-initval="10"> <option value="">เลือกรายการ</option> </select> <br> <select name="amphur_id" id="amphur_id" data-initval="130"> <option value="">เลือกรายการ</option> </select> <br> <select name="district_id" id="district_id" data-initval="5"> <option value="">เลือกรายการ</option> </select>
ตัวอย่างโค้ดการกำหนดหน้าแก้ไข เรียกจากการคิวรี่ฐานข้อมูล
<select name="province_id" id="province_id" data-initval="<?=$row['province_id']?>"> <option value="">เลือกรายการ</option> </select> <br> <select name="amphur_id" id="amphur_id" data-initval="<?=$row['amphur_id']?>"> <option value="">เลือกรายการ</option> </select> <br> <select name="district_id" id="district_id" data-initval="<?=$row['district_id']?>"> <option value="">เลือกรายการ</option> </select>
ในส่วยของ javascript การใช้งาน ajax เราจะเปลี่ยนเป็นรูปแบบสร้างเป็น ฟังก์ชั่น ดังนี้
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// สร้างฟังก์ชั่น รับค่า ไฟล์ , selector เป้าหมาย , และข้อมูลที่ส่ง
var loadOption = function(targetFile,targetObj,dataSend){
var dataCheck=$(targetObj).data("initval");// เก็บค่าที่ได้เลือกไว้แล้ว
if(dataCheck!=null){ // ถ้ามีการกำหนดค่าที่ได้เลือกไว้แล้วใน data-initval
// รวมข้อมูลที่จะส่งไปยัง ajax ในที่นี้ใช้ตัวแปรชื่อ checkVal มีค่าเท่ากับ dataCheck
dataSend=$.extend(dataSend,{checkVal:dataCheck});
}
// ทำงาน ajax ส่งค่าข้อมูล
$.get(targetFile,dataSend,function(data){ // สำเร็จคืนค่า data
$(targetObj).html(data); // แทนค่าใน selector เป้าหมาย
$(targetObj).trigger("change"); // เรียก event ให้ selector เป้าหมายทำงาน
});
}
// ลิสรายการแรกใช้ ajax ดึงรายการจังหวัดทั้งหมด
var dataSend={
type_option:1
};
var targetObj="select#province_id";
loadOption("get_option.php",targetObj,dataSend);
// ถ้าเปลี่่ยนจังหวัด ส่งค่าไอดีจังหวัดไปเปลี่ยนรายการอำเภอ
$("select#province_id").on("change",function(){
var dataSend={
type_option:2,
province_id:$(this).val()
};
var targetObj="select#amphur_id";
loadOption("get_option.php",targetObj,dataSend);
});
// ถ้าเปลี่ยนอำเภอ ส่งค่าไอดีอำเภอไปเปลี่ยนรายการตำบล
$("select#amphur_id").on("change",function(){
var dataSend={
type_option:3,
amphur_id:$(this).val()
};
var targetObj="select#district_id";
loadOption("get_option.php",targetObj,dataSend);
});
/*// เรียกใช้ส่วนนี้ ถ้ารายการแรก ไม่ได้ใช้ ajax
$("select#province_id").val(function(){
return $(this).data("initval");
}).trigger("change"); */
});
</script>
ไฟล์ db_connect.php
<?php
$mysqli = new mysqli("localhost", "root","","test");
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
if(!$mysqli->set_charset("utf8")) {
printf("Error loading character set utf8: %s\n", $mysqli->error);
exit();
}
ตัวอย่างไฟล์ get_option.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("db_connect.php");
?>
<?php
// แสดงรายการจังหวัดทั้งหมด
if(isset($_GET['type_option']) && $_GET['type_option']==1){
?>
<option value="">เลือกรายการ</option>
<?php
$sql="
SELECT * FROM province WHERE 1
";
$result = $mysqli->query($sql);
if($result){
while($row=$result->fetch_array()){
$is_selected=(isset($_GET['checkVal']) && $_GET['checkVal']==$row['province_id'])?" selected":"";
?>
<option value="<?=$row['province_id']?>" <?=$is_selected?>><?=$row['province_name']?></option>
<?php
}
}
?>
<?php }else{ ?>
<?php if(isset($_GET['type_option']) && $_GET['type_option']==1){ ?>
<option value="">เลือกรายการ</option>
<?php } ?>
<?php } //
exit;
?>
<?php
// ส่งค่าไอดีจังหวัดมาเพื่อแสดงรายการอำเภอ
if(isset($_GET['province_id']) && $_GET['province_id']!="" && $_GET['type_option']==2){
?>
<option value="">เลือกรายการ</option>
<?php
$sql="
SELECT * FROM amphur WHERE province_id = '".$_GET['province_id']."'
";
$result = $mysqli->query($sql);
if($result){
while($row=$result->fetch_array()){
$is_selected=(isset($_GET['checkVal']) && $_GET['checkVal']==$row['amphur_id'])?" selected":"";
?>
<option value="<?=$row['amphur_id']?>" <?=$is_selected?>><?=$row['amphur_name']?></option>
<?php
}
}
?>
<?php }else{ ?>
<?php if(isset($_GET['type_option']) && $_GET['type_option']==2){ ?>
<option value="">เลือกรายการ</option>
<?php } ?>
<?php } //
exit;
?>
<?php
// ส่งค่าไอดีอำเภอมาเพื่อแสดงรายการตำบล
if(isset($_GET['amphur_id']) && $_GET['amphur_id']!="" && $_GET['type_option']==3){
?>
<option value="">เลือกรายการ</option>
<?php
$sql="
SELECT * FROM district WHERE amphur_id = '".$_GET['amphur_id']."'
";
$result = $mysqli->query($sql);
if($result){
while($row=$result->fetch_array()){
$is_selected=(isset($_GET['checkVal']) && $_GET['checkVal']==$row['district_id'])?" selected":"";
?>
<option value="<?=$row['district_id']?>" <?=$is_selected?>><?=$row['district_name']?></option>
<?php
}
}
?>
<?php }else{ ?>
<?php if(isset($_GET['type_option']) && $_GET['type_option']==3){ ?>
<option value="">เลือกรายการ</option>
<?php } ?>
<?php } //
exit;
?>