กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย

07 June 2009 เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee

listbox ajax jquery

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

ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ listbox ที่ 1 และให้แสดงอำเภอเฉพาะในจังหวัดที่เลือกใน listbox ที่ 2 หรืออื่นๆ เป็นต้น

ไฟล์ two_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>
<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
         });
    });     
    
});
</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_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);   
// ส่วนติดต่อกับฐานข้อมูล  
mysql_connect("localhost","root","test") or die("Cannot connect the Server");       
mysql_select_db("test") or die("Cannot select database");       
mysql_query("set character set utf8");   
?>
<?php if(isset($_GET['list1']) && $_GET['list1']!=""){?>
  <option value="">เลือกรายการ</option>
  <?php
  $q="SELECT * FROM table WHERE field='".$_GET['list1']."' ";
  $qr=mysql_query($q);
  while($rs=mysql_fetch_array($qr)){
  ?>
  <option value="<?=$rs['column_data_id']?>">เลือกรายการ <?=$rs['culumn_data']?></option>
  <?php } ?>
<?php }else{ ?>
  <option value="">เลือกรายการ</option>
<?php } ?>