การทำ List/Menu ด้วย Ajax 

1.สร้างฐานข้อมูล

CREATE DATABASE `listmenu` ;

2.สร้างตารางเก็บข้อมูล 

CREATE TABLE `tb_catalog` ( `cat_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`cat_name` tinytext NOT NULL ,
PRIMARY KEY ( `cat_id` ) ) ENGINE = MYISAM DEFAULT CHARSET = tis620 AUTO_INCREMENT =7;# MySQL คืนผลลัพธ์ว่างเปล่ากลับมา (null / 0 แถว).
-- 
-- dump ตาราง `tb_catalog`
-- 
INSERT INTO `tb_catalog` ( `cat_id` , `cat_name` ) 
VALUES ( 1, 'RING' ) , ( 2, 'PENDANT&BROOCH' ) , ( 3, 'EARRING' ) , ( 4, 'BRACELET' ) , ( 5, 'BANGLE' ) , ( 6, 'NECKLACE' ) ;# แถวที่มีผล:6
-- --------------------------------------------------------
-- 
-- โครงสร้างตาราง `tb_subcatalog`
-- 
CREATE TABLE `tb_subcatalog` ( `sub_id` int( 11 ) NOT NULL AUTO_INCREMENT ,
`cat_id` int( 11 ) NOT NULL default '0',
`sub_name` tinytext NOT NULL ,
`sub_date` tinytext NOT NULL ,
PRIMARY KEY ( `sub_id` ) ) ENGINE = MYISAM DEFAULT CHARSET = tis620 AUTO_INCREMENT =52;# MySQL คืนผลลัพธ์ว่างเปล่ากลับมา (null / 0 แถว).
-- 
-- dump ตาราง `tb_subcatalog`
-- 
INSERT INTO `tb_subcatalog` ( `sub_id` , `cat_id` , `sub_name` , `sub_date` ) 
VALUES ( 1, 1, 'PLAIN RING', '1201599849' ) , ( 2, 1, 'CZ RING', '1201596870' ) , ( 3, 1, 'PAVE RING', '1201597820' ) , ( 4, 2, 'PLAIN PENDANT', '1201596895' ) , ( 5, 2, 'CZ PENDANT', '1201596906' ) , ( 6, 2, 'PAVE PENDANT', '1201596915' ) , ( 7, 3, 'PLAIN EARRING', '1201599709' ) , ( 8, 3, 'CZ EARRING', '1201596936' ) , ( 9, 3, 'PAVE EARRING', '1201596945' ) , ( 10, 4, 'PLAIN BRACELET', '1201596963' ) , ( 11, 4, 'CZ BRACELET', '1201596979' ) , ( 19, 1, 'MARCASITE RING', '1201673452' ) , ( 20, 1, 'SEMIPRECIOUS RING', '1201673469' ) , ( 22, 2, 'MARCASITE PENDANT', '1201673604' ) , ( 21, 1, 'OTHER RING', '1201673483' ) , ( 23, 2, 'SEMIPRECIOUS PENDANT', '1201673622' ) , ( 24, 3, 'MARCASITE EARRING', '1201674153' ) , ( 25, 3, 'SEMIPRECIOUS EARRING', '1201674165' ) , ( 26, 4, 'PAVE BRACELET ', '1201674189' ) , ( 27, 4, 'MARCASITE BRACELET ', '1201674205' ) , ( 28, 4, 'SEMIPRECIOUS BRACELET', '1201674220' ) , ( 29, 5, 'PLAIN BANGLE', '1201674247' ) , ( 30, 5, 'CZ BANGLE', '1201674253' ) , ( 31, 5, 'PAVE BANGLE', '1201674260' ) , ( 32, 5, 'MARCASITE BANGLE', '1201674270' ) , ( 33, 5, 'SEMIPRECIOUS BANGLE', '1201674282' ) , ( 34, 6, 'PLAIN NECKLACE', '1201674302' ) , ( 35, 6, 'CZ NECKLACE', '1201674383' ) , ( 36, 6, 'PAVE NECKLACE', '1201674390' ) , ( 37, 6, 'MARCASITE NECKLACE', '1201674416' ) , ( 38, 6, 'SEMIPRECIOUS NECKLACE', '1201674428' ) , ( 39, 5, 'OTHER BANGLE', '1201674458' ) , ( 40, 6, 'OTHER NECKLACE', '1201674470' ) , ( 41, 3, 'OTHER EARRING', '1201674490' ) , ( 42, 2, 'OTHER PENDANT', '1201674517' ) , ( 43, 4, 'OTHER BRACELET', '1201674535' ) , ( 44, 1, 'SINGLE STONE RING', '1201674567' ) , ( 46, 1, 'mam r', '1202203757' ) , ( 47, 2, 'mam p', '1202203750' ) , ( 48, 3, 'mam e', '1202203742' ) , ( 49, 4, 'mam br', '1202203735' ) , ( 50, 5, 'mam b', '1202203726' ) , ( 51, 6, 'mam n', '1202203712' ) ;#

3.สร้างไฟล์ menu.php โดยนำโค้ดนี้ไว้ใน Head

<script>
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} 
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function list_namesub(id) {
var obj = document.getElementById("subcatalog");
var obj_default = '- Choose -';
if(id ==""){
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');}else{
var url = "get_subname.php?id=" + id;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var results = xmlHttp.responseText;
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
arr_list=results.split("/");
if(arr_list.length-1!=0){
for (var i=0; i < eval(arr_list.length-1); i++) {
shop_arr=arr_list[i].split(",");
obj.options[i] = new Option(shop_arr[0],shop_arr[1]); 
}}else{
while(obj.childNodes.length>0){obj.removeChild(obj.childNodes[0]);}
obj[0] = new Option(obj_default,'');
}
}
}}
}}
</script>

4.นำโค้ดนี้ไว้ใน Body
<form id="form1" name="form1" method="post" action="">
<select name="catalog" id="catalog" onChange="list_namesub(this.value);" style="width:200px">
<option value="">- Choose -</option>
<? 
$host="localhost"; //ชื่อ Host 
$user="root"; //ชื่อ user 
$password=""; //รหัสผ่านฐานข้อมูล
$dbname="listmenu";
$connection=mysql_connect($host,$user,$password) or die("เชื่อมต่อฐานข้อมูลไม่ได้");
mysql_select_db($dbname) or die("ไม่สามารถเลือกฐานข้อมูลได้");
$sql="select * from tb_catalog order by cat_id ASC";
$dbquery=mysql_db_query($dbname,$sql);
while($result=mysql_fetch_array($dbquery)){
?>
<option value="<?=$result[cat_id];?>"><?=$result[cat_name];?></option>
<? 
}
?>
</select>
<br />
<br />
<select name="subcatalog" id="subcatalog" style="width:200px">
<option value="">- Choose -</option>
</select>
</form>

5.หลังจากนั้นให้สร้างไฟล์ get_subname.php ดังนี้

<?php
header("Content-Type: text/plain; charset=TIS-620");
$host="localhost";
$user="root";
$password="";
$dbname="listmenu";
$connection=mysql_connect($host,$user,$password) or die("เชื่อมต่อฐานข้อมูลไม่ได้");
mysql_select_db($dbname) or die("ไม่สามารถเลือกฐานข้อมูลได้");
$sql="select * from tb_subcatalog where cat_id = '$id' ";
$dbquery = mysql_db_query($dbname, $sql);
echo "- Choose -, /";
while ($result = mysql_fetch_array($dbquery)){
echo"$result[sub_name],$result[sub_id]/";
}
mysql_close();
?>

อธิบาย 
1. onChange="list_namesub(this.value);" เมื่อเราเลือก Listmenu Catalog และจะนำค่า id catalog ไปให้ Function list_namwsub 
2. var url = "get_subname.php?id=" + id; ก็จะส่งค่า id catalog ไปที่ไฟล์ get_subname.php เพื่อค้นหา subcatalog ของ catalog แล้วนำมาแสดงที่ var obj = document.getElementById("subcatalog"); subcatalog คือชื่อ Listmenu ของ subcatalog 

6.มาดูผลกัน
ตอนที่เรายังไม่ได้เลือก Catalog (ด้านบน) กันนะครับ จะเห็นว่า Listmenu subcatalog ด้านล่างไม่มีค่าอะไรเลยนะครับ 

 

ทีนี่มาดูตอนที่เราเลือก Catalog ไปที่ Ring ดูนะครับ จะเห็นว่ามีเมนู ออกมาโดยไม่ต้อง Refresh หน้านี้ใหม่นะครับ

 

เป็นทาน แหล่งความรู้ ที่มา http://www.webthaidd.com/php/webthaidd_article_769_.html