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

07 June 2009 By Ninenik Narkdee
jquery ajax listbox

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



ตัวอย่างต่อไป เป็นตัวอย่างการใช้งานอย่างง่าย สามารถนำไปประยุกต์ใช้ได้อย่างกว้างขวาง เช่น ประยุกต์ใช้สำหรับ การเลือกจังหวัดในรายการ 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 } ?>


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 03-03-2019


กรณีดึงจากฐานข้อมูล ให้เปลี่ยนมาใช้รูปแบบ mysqli แทน 
โดยดูแนวทางตัวอย่างได้ที่


https://www.ninenik.com/forum_view_2398_1.html#comment_5642


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







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



Tags:: ajax jquery listbox







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











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