list menuครับช่วยหน่อยครับ คือเช่นถ้ามีlist menu อยู่สามอันครับอันที่หนึ่งดึงค่าจากเบสมาแสดงพอเลือก
ขั้นตอนการทำงาน
จากนั้นก็จะทำการดึงข้อมูลขึ้นมาแสดงใน List Box ทั้งสอง List Box ซึ่งเมื่อเลือกค่า List Box อันแรกแล้ว ค่าใน List Box อันที่สอง ก็จะเปลี่ยนตามอัตโนมัติ โดยไม่ต้อง Refresh หน้าจอ ยกตัวอย่าง ในส่วนของ Main Category ทำการเลือก ?เสื้อบุรุษ? ใน Sub Category ก็จะแสดงข้อมูลของหมวดย่อยที่อยู่ภายใต้ ?เสื้อบุรุษ? เช่น ?เสื้อฮาวาย? ?เสื้อโปโล? ?เสื้อทีเชิ้ต? และ ?เสื้อเชิ้ต? เป็นต้น
ในส่วนนี้เราต้องอาศัย JavaScript เข้ามาช่วย หลักการง่ายๆก็คือ ดึงค่าจาก Database ออกมาก่อน แล้วไปเก็บไว้ใน Array ของ JavaScript จากนั้นก็ใช้ Code ของ JavaScript ดึงออกมา ลองดูจาก Code ตัวอย่างได้เลยครับ (โดย Code ตัวอย่างจะใช้ MySQL เป็น Database ครับ และสมมุติให้ตารางที่เก็บข้อมูลชื่อ StoreMaincatTable และ StoreSubcatTable โดยมีความสัมพันธ์กันตามรูปข้างบนครับ)
Code ตัวอย่าง
//////////////////////////////// ตัวอย่าง Code ////////////////////////////////
<?php
$host = "localhost";
$user = "username"; //Username ที่ใช้ในการติดต่อ MySQL
$password = "password"; //Password ที่ใช้ในการติดต่อ MySQL
$conn = mysql_connect($host, $user, $password);
$db = "yourDB"; //ชื่อของ Database
$Sel = "SELECT * FROM StoreMaincatTable ORDER BY S_Maincat_Name ASC ";
$ExecSelMain = mysql_query($db, $Sel);
?>
<script language="JavaScript">
<?
while($RowMain = mysql_fetch_array($ExecSelMain)){
$count = 0;
$maincat = $RowMain[0];
?>
var Array<?echo $maincat;?> = new Array("('Sub Categories','',true,true)"
<?
$SelSub = "SELECT * FROM StoreSubcatTable WHERE S_MaincatID='$RowMain[0]' ";
$ExecSelSub = mysql_query($db, $SelSub);
$nrow = mysql_num_rows($ExecSelSub);
if($nrow > 0){
while($RowSub = mysql_fetch_array($ExecSelSub)){
$i = 1;
$nf = mysql_num_fields($ExecSelSub );
?>
<? if($count == $nrow-1){ ?>
,"('<? echo $RowSub[$i]; ?>')");
<?}else{?>
,"('<? echo $RowSub[$i]; ?>')"
<? } // End Else
$count++;
} // End of While StoreSubcatTable
}else{
?>
);
<?php
}
} // End of While StoreMaincatTable
?>
function LoadProductType(form1,selected) {
var selectedArray = eval("Array"+selected);
while (selectedArray.length < form1.subcat1.options.length) {
form1.subcat1.options[(form1.subcat1.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("form1.subcat1.options=" + "new Option" + selectedArray);
}
if (form1.maincat.options[0].value == '') {
form1.maincat.options[0]= null;
if ( navigator.appName == 'Netscape') {
if (parseInt(navigator.appVersion) < 4) {
window.history.go(0);
}
else {
if (navigator.platform == 'Win32' || navigator.platform == 'Win16') {
window.history.go(0);
}
}
}
}
}
</script>
<form name="FormSearchCat" method="post">
<table width="400" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
<tr><td colspan="2">Search</td></tr>
<tr><td>หมวดหลัก</td>
<td>
<?php
$SelMainS = "SELECT * FROM StoreMaincatTable ORDER BY S_Maincat_Name ASC ";
$ExecSelMainS = mysql_query($db, $SelMainS);
?>
<select name='maincat' onChange = "LoadProductType(document.FormSearchCat,document.FormSearchCat.maincat.options
[document.FormSearchCat.maincat.selectedIndex].value)">
<option value="" selected>Main Categories</option>
<?php while($RowMainS = mysql_fetch_row($ExecSelMainS)){
$maincatC = $RowMainS[0];
?>
<option value="<?php echo $maincatC;?>"><?echo stripslashes($RowMainS[1]);?> </option>
<?}?>
</select>
</td>
</tr>
<tr><td>หมวดย่อย</td>
<td>
<select name='subcat1'>
<option value=""><font face="MS Sans Serif" size="1">None</font></option>
</select>
</td>
</tr>
<tr><td colspan="2"><div align="right"><input type="submit" name="Submit" value="Submit"></div></td></tr>
</table>
</form>
//////////////////////////////// สิ้นสุด ตัวอย่าง Code ////////////////////////////////
รายละเอียดโดยสังเขปของแต่ละส่วนมีดังนี้
$Sel = "SELECT * FROM StoreMaincatTable ORDER BY S_Maincat_Name ASC ";
$ExecSelMain = mysql_query($db, $Sel);
อธิบาย: ทำการดึงข้อมูลในส่วนของหมวดหลักขึ้นมา
--------------------------------------------------------------------------------
<script language="JavaScript">
<?
while($RowMain = mysql_fetch_array($ExecSelMain)){
$count = 0;
$maincat = $RowMain[0];
?>
var Array<?echo $maincat;?> = new Array("('Sub Categories','',true,true)"
<?
$SelSub = "SELECT * FROM StoreSubcatTable WHERE S_MaincatID='$RowMain[0]' ";
$ExecSelSub = mysql_query($db, $SelSub);
$nrow = mysql_num_rows($ExecSelSub);
if($nrow > 0){
while($RowSub = mysql_fetch_array($ExecSelSub)){
$i = 1;
$nf = mysql_num_fields($ExecSelSub );
?>
<? if($count == $nrow-1){ ?>
,"('<? echo $RowSub[$i]; ?>')");
<?}else{?>
,"('<? echo $RowSub[$i]; ?>')"
<? } // End Else
$count++;
} // End of While StoreSubcatTable
}else{
?>
);
<?php
}
} // End of While StoreMaincatTable
?>
อธิบาย: เป็นการเขียน Code PHP ฝังอยู่ใน JavaScript โดยทำการดึงข้อมูลจากหมวดหลักและหมวดย่อยมาจัดอยู่ในรูปแบบ Array ของ JavaScript ถ้าใครดู Code ส่วนนี้แล้วงง แนะนำให้ View Source ดู Code JavaScript อย่างเดียว ในส่วนของ Output ครับ (หน้า Web Page ที่เป็น Output ของเราเมื่อ Click View Source จะเห็นเป็นแค่ Code HTML กับ JavaScript ครับ ซึ่งจะไม่มี Code PHP มาปนก็อาจจะทำให้เข้าใจได้ง่ายขึ้นครับ)
--------------------------------------------------------------------------------
<form name="FormSearchCat" method="post">
<table width="400" border="1" cellpadding="5" cellspacing="0" bordercolor="#000000">
<tr><td colspan="2">Search</td></tr>
<tr><td>หมวดหลัก</td>
<td>
<?php
$SelMainS = "SELECT * FROM StoreMaincatTable ORDER BY S_Maincat_Name ASC ";
$ExecSelMainS = mysql_query($db, $SelMainS);
?>
<select name='maincat' onChange = "LoadProductType(document.FormSearchCat,document.FormSearchCat.maincat.options
[document.FormSearchCat.maincat.selectedIndex].value)">
<option value="" selected>Main Categories</option>
<?php while($RowMainS = mysql_fetch_row($ExecSelMainS)){
$maincatC = $RowMainS[0];
?>
<option value="<?php echo $maincatC;?>"><?echo stripslashes($RowMainS[1]);?> </option>
<?}?>
</select>
</td>
</tr>
<tr><td>หมวดย่อย</td>
<td>
<select name='subcat1'>
<option value=""><font face="MS Sans Serif" size="1">None</font></option>
</select>
</td>
</tr>
<tr><td colspan="2"><div align="right"><input type="submit" name="Submit" value="Submit"></div></td></tr>
</table>
</form>
อธิบาย: อันนี้เป็นส่วนของ Output ที่อยู่ใน Form ครับ โดย PHP จะทำการดึงเอาหมวดหลักออกมาไว้ใน List Box อันแรก เมื่อเราเลือก Web Page หน้านี้ดูก็จะเห็นว่าเป็น Code JavaScript ที่อาศัย onChange เป็นตัวจับ Event ที่เกิดขึ้น โดยเมื่อเลือกหมวดหลักแล้ว List Box อันที่สอง ที่เป็นหมวดย่อย ก็จะเปลี่ยนตามค่า Array ของ JavaScript ที่กำหนดไว้นั่นเอง
Date :
1 ก.พ. 2550 23:35:11
By :
arsachi
อยากได้ตัวฐานข้อมูลจริงขอหน่อยได้เปล่าครับ
Date :
7 ก.พ. 2550 15:20:05
By :
b
''งง อธิบาย sql ด้วยสิ
Date :
21 มี.ค. 2551 13:30:09
By :
ดดดดดดดดดดดดดดดด
Load balance : Server 03