ประยุกต์การเลือก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน รองรับการแก้ไข

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
listbox

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ listbox

ดูแล้ว 10,330 ครั้ง


เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ
 
ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน 
 
โดยมีการปรับเปลี่ยนรูปแบบการเรียกใช้ใหม่ให้ง่ายและ สะดวกยิ่งขึ้น
สามารถใช้แทนรูปแบบเดิมได้ เพราะรูปแบบใหม่นี้ จะรองรับกรณีแก้ไขข้อมูล
ในที่นี้เราจะใช้งาน 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;
?>	

 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: listbox







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ