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

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

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

ดูแล้ว 11,082 ครั้ง


เนื้อหานี้เป็นการประยุกต์ต่อยอดเพิ่มเติมจากบทความ
 
ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน 
 
โดยมีการปรับเปลี่ยนรูปแบบการเรียกใช้ใหม่ให้ง่ายและ สะดวกยิ่งขึ้น
สามารถใช้แทนรูปแบบเดิมได้ เพราะรูปแบบใหม่นี้ จะรองรับกรณีแก้ไขข้อมูล
ในที่นี้เราจะใช้งาน data- attribute ของ html5 มาเป้นตัวกำหนดค่าของ
ข้อมูลเดิม
 

ยกตัวอย่าง เช่นเราเก็บช้อมูล

province_id ไอดีจังหวัด สมมติเท่ากับ 10
amphur_id ไอดีอำเภอ สมมติเท่ากับ 130
district_id ไอดีตำบล สมมติเท่ากับ 5
 
 

การกำหนดเรียกใช้งานหน้าเพิ่มข้อมูล ที่เราต้องเลือกจังหวัด อำเภอ และตำบลก็จะประมาณนี้

 
1
2
3
4
5
6
7
8
9
10
11
<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 ดังนี้

 
1
2
3
4
5
6
7
8
9
10
11
<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>
 

ตัวอย่างโค้ดการกำหนดหน้าแก้ไข เรียกจากการคิวรี่ฐานข้อมูล

1
2
3
4
5
6
7
8
9
10
11
<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 เราจะเปลี่ยนเป็นรูปแบบสร้างเป็น ฟังก์ชั่น ดังนี้

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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

 
1
2
3
4
5
6
7
8
9
10
11
<?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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?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 สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ