PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ประยุกต์การเลือกจาก listbox มากกว่า 2 รายการ ที่สัมพันธ์กัน

08 November 2014 By


แนวทางและโค้ดตัวอย่างต่อไปนี้ เป็นการประยุกต์ใช้งาน listbox หรือ
แท็ก select ที่มีความสัมพันธ์ของข้อมูล มากกว่า 2 รายการ ยกตัวอย่าง
เช่น การเลือกจังหวัด เลือกอำเภอ เลือกตำบล 
หรือ การเลือกคณะ เลือกสาขา เลือกวิชา
หรือ เลือกยี่ห้อ เลือกประเภท และเลือก ขนาด / สี
แบบนี้เป็นต้น
 
เนื้อหานี้จะประยุกต์จากบทความเก่า เรื่อง
 
กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=207 via @ninenik
 
ดังนั้นการใช้งานกับฐานข้อมูล สามารถดูจากบทความข้างต้น ได้
 
สำหรับในที่นี้จะใช้วิธีนำเสนอ เป็นแนวทาง สามารถนำไปประยุกต์หรือดัด
แปลงเพิ่มเติมได้ตามความเหมาะสม
 
ตัวอย่าง
 


ตัวเลือกที่1:
ตัวเลือกที่2:
ตัวเลือกที่3:
ตัวเลือกที่4:


 
ไฟล์ทดสอบ four_listbox.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">  
    .mylabel{  
        display: inline-block;  
        width: 150px;  
        margin-bottom: 10px;          
    }  
    </style>      
</head>
<body>
 
<div style="margin:auto;width:80%;">

<form id="form1" name="form1" method="post" action="">
  <br>
  <br>
<span class="mylabel">ตัวเลือกที่1: </span>    
<select name="list1" id="list1">
  <option value="">เลือกรายการ</option>
  <option value="1">เลือกรายการ 1</option>
  <option value="2">เลือกรายการ 2</option>
  <option value="3">เลือกรายการ 3</option>
  <option value="4">เลือกรายการ 4</option>
  <option value="5">เลือกรายการ 5</option>                
  </select>
<br>
<span class="mylabel">ตัวเลือกที่2: </span>   
<select name="list2" id="list2">
  <option value="">เลือกรายการ</option>
</select>
<br>
<span class="mylabel">ตัวเลือกที่3: </span>   
<select name="list3" id="list3">
  <option value="">เลือกรายการ</option>
</select>
<br>
<span class="mylabel">ตัวเลือกที่4: </span>   
<select name="list4" id="list4">
  <option value="">เลือกรายการ</option>
</select>
<br>
<br>
<span class="mylabel"></span>   
    <input type="submit" name="button" id="button" value="Submit" />
<br>
</form>

        
</div>  
    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script type="text/javascript">
$(function(){
    
    // เมื่อเปลี่ยนค่าของ select id เท่ากับ list1
     $("select#list1").change(function(){  
         // ส่งค่า ตัวแปร list1 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list2.php
         $.get("data_for_list2.php",{
             list1:$(this).val()
         },function(data){ // คืนค่ากลับมา
                $("select#list2").html(data);  // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list2      
                $("select#list2").trigger("change"); // อัพเดท list2 เพื่อให้ list2 ทำงานสำหรับรีเซ็ตค่า
         });
    });     
    
    // เมื่อเปลี่ยนค่าของ select id เท่ากับ list2
     $("select#list2").change(function(){  
         // ส่งค่า ตัวแปร list2 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list3.php
         $.get("data_for_list3.php",{
             list2:$(this).val()
         },function(data){ // คืนค่ากลับมา
                $("select#list3").html(data);  // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list3
                $("select#list3").trigger("change"); // อัพเดท list3 เพื่อให้ list3 ทำงานสำหรับรีเซ็ตค่า
         });
    });         
    
    // เมื่อเปลี่ยนค่าของ select id เท่ากับ list3
     $("select#list3").change(function(){  
         // ส่งค่า ตัวแปร list3 มีค่าเท่ากับค่าที่เลือก ส่งแบบ get ไปที่ไฟล์ data_for_list4.php
         $.get("data_for_list4.php",{
             list3:$(this).val()
         },function(data){ // คืนค่ากลับมา
                $("select#list4").html(data);  // นำค่าที่ได้ไปใส่ใน select id เท่ากับ list4
                $("select#list4").trigger("change"); // อัพเดท list4 เพื่อให้ list4 ทำงานสำหรับรีเซ็ตค่า             
         });
    });             
    
});
</script>      
</body>
</html>
 
ไฟล์ data_for_list2.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);   
?>
<?php if(isset($_GET['list1']) && $_GET['list1']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php for($i=1;$i<=$_GET['list1'];$i++){ ?>
  <option value="<?=$i?>">เลือกรายการ <?=$i?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>
 
ไฟล์ data_for_list3.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);   
?>
<?php if(isset($_GET['list2']) && $_GET['list2']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php for($i=1;$i<=$_GET['list2'];$i++){ ?>
  <option value="<?=$i?>">เลือกรายการ <?=$i?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>
 
ไฟล์ data_for_list4.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);   
?>
<?php if(isset($_GET['list3']) && $_GET['list3']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php for($i=1;$i<=$_GET['list3'];$i++){ ?>
  <option value="<?=$i?>">เลือกรายการ <?=$i?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>
 
สำหรับไฟล์ data_for_list(x).php นั้น ตามตัวอย่างจะทำแยกเพื่อให้เห็น
แนวทางชัดเจน ส่วนสำหรับ การไปใช้งานงาน อาจจะใข้เป็นไฟล์เดียวก็ได้
แล้วกำหนด if else เป็นเงื่อนไขสำหรับข้อมูลแทน



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



Tags:: listbox





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