เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ
ประยุกต์การเลือกจาก 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; ?>