รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

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


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


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

ไฟล์ two_listbox.php
<form id="form1" name="form1" method="post" action="">
  <p>ตัวเลือกที่1
    <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 />
ตัวเลือกที่2
<select name="list2" id="list2">
  <option value="">เลือกรายการ</option>
</select>
</p>
  <p>
    <input type="submit" name="button" id="button" value="Submit" />
</p>
</form>

Javascript Code แทรกในไฟล์ two_listbox.php
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
$("select#list1").change(function(){
var datalist2 = $.ajax({ // รับค่าจาก ajax เก็บไว้ที่ตัวแปร datalist2
 url: "data_for_list2.php", // ไฟล์สำหรับการกำหนดเงื่อนไข
 data:"list1="+$(this).val(), // ส่งตัวแปร GET ชื่อ list1 ให้มีค่าเท่ากับ ค่าของ list1
 async: false
}).responseText;
$("select#list2").html(datalist2); // นำค่า datalist2 มาแสดงใน listbox ที่ 2 ที่ชื่อ list2
// ชื่อตัวแปร และ element ต่างๆ สามารถเปลี่ยนไปตามการกำหนด
});
});
</script>

ไฟล์ data_for_list2.php

<?php
header("Content-type: application/xhtml+xml; charset=utf-8"); 
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
<?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 } ?>


Short URL click!
<< กลับคืน : เข้าชม 18,031 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/