PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

07 June 2009 By
jquery listbox ajax

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



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








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



Tags:: listbox jquery ajax






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


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