GORAGOD.com

แสดงรายการจาก Combobox

ตัวอย่างนี้ เป็นการแสดงรายชื่อกลุ่ม หรือหมวดต่างๆ ที่มีบนเว็บบอร์ด เพื่อเลือกหมวดสำหรับการค้นหา โดยใช้ Combobox 2 ตัว ตัวแรกจะแสดงรายชื่อกลุ่ม เมื่อทำการเลือกตัวแรก ตัวที่ 2 จะแสดงรายชื่อ category ต่างๆ ที่มีในกลุ่มต่างๆ และเมื่อทำการเลือก ตัวที่ 2 จะแสดงรายละเอียดของกลุ่มต่างๆมาแสดง

ตัวอย่างโค้ดนี้ทำงานกับฐานข้อมูลของ Webboard Text ครับ ถ้าเป็นฐานข้อมูลอื่นๆคงต้องดัดแปลงกันนิดหน่อครับ

<?
  //ค่าที่ส่งมาเมื่อทำการเลือกกลุุ่ม
  $groupid=$_GET["groupid];
  
  //ค่ากำหนดของฐานข้อมูล
  //จากตัวอย่างเป็นการแสดงข้อมูลจากเว็บไซต์แห่งนี้
  include("config/config.php"); //ฟังก์ชั่น
  include("config/tdb.class.php"); //เรียกใช้ คลาส text database
  include("config/function.php"); //ฟังก์ชั่น
  
  $db=new tdb($config[data], "db.tdb"); //เปิดฐานข้อมูล
  $db->get("webboard", $config); //โหลด config
  
  //ลิสต์รายการกลุ่มออกมาแสดง
  $listofgroup=$db->listRec("webboardgroup");
  echo "เลือกกลุ่ม : <select name=group onchange=groupchange(this.value)> ";
  for ($i=0; $i<count($listofgroup); $i++) {
    $id=$listofgroup[$i][group_id];
    $topic=$listofgroup[$i][group_topic];
    echo "<option value=$id id=$id>$topic</option> ";
  }
  echo "</select> ";
  
  //ให้ทำการเลือกกลุ่มแรก ถ้าไม่ได้กำหนดกลุ่มมา
  if (empty($groupid)) $groupid=$listofgroup[0][group_id];

  //ลิสต์รายการภายในกลุ่มที่เลือกออกมาแสดง
  $listofcategory=$db->basicQuery("webboardcategory", "cat_groupid", $groupid); //ลิสต์รายการกลุ่ม
  echo "เลือกรายการ : <select name=category onchange=catchange(this.value)> ";
  for ($i=0; $i<count($listofcategory); $i++) {
    $topic=$listofcategory[$i][cat_topic];
    $detail=$listofcategory[$i][cat_detail];
    echo "<option value='$detail'>$topic</option> ";
  }
  echo "</select> ";
?>
<!--แสดงรายละเอียดของส่วนต่างๆ-->
<div id=catdetail><?=$listofcategory[0][cat_detail]?></div>
<script language=Javascript>
//ทำการเลือก กลุ่มที่เลือก
group.options('<?=$groupid?>').selected=true;

//แสดงรายการภายในกลุ่ม
function groupchange(value) {
  document.URL="?groupid="+value;
}

//แสดงรายละเอียดของแต่ละรายการ
function catchange(value) {
  catdetail.innerHTML=value;
}
</script>

   หมายเหตุ ตัวอย่างนี้เป็นการอ่านจากฐานข้อมูลแบบ TEXT ซึ่งเป็นฐานข้อมูลที่ใช้อยู่บนเว็บไซต์นี้ ดังนั้นหากนำไปใช้กับฐานข้อมูลชนิดอื่น (MySQL) ต้องทำการดัดแปลงโค้ดให้ใช้กับฐานข้อมูลนั้นด้วยครับ ตัวอย่างนี้เป็นเพียงแนวทาง เพื่อให้มองเห็นภาพ เท่านั้นครับ