จะทำ list menu แบบนี้ครับ

bradpit

คือว่าผม จะทำ list menu แบบนี้ครับ เป็น Ajax ตอนนี้ผมทำได้แล้ว แต่ยังทำให้เวลาเราไม่ได้เลือกหมวดย่อยจะไม่สามารถเลือกได้ ถ้าเราเลือกหมวดหลัก หมวดย่อยก็จะแสดงขึ้นมา สามารถเลือกได้ เหมือนเว็บ sanook ครับ : <a href="http://webindex.sanook.com/addweb/add-web-step-3.php">http://webindex.sanook.com/addweb/add-web-step-3.php</a> นี้เป็นโค้ดหน้าแรก index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>#ADD NEW WEBINDEX#</title> <script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script> <script type="text/javascript">           var theForm = document.formADD; var alphaRE = /^[a-zA-Z]+$/; var emailRE = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; var userRE0 = new RegExp("http://"); var sFlg_sub_cat = false; var sFlg_main_cat = false; var errMsg = ""; var setfocus = ""; for(var s7=0;s7<theForm['sub_cat'].length;s7++){if(theForm['sub_cat'].options[s7].selected){if(theForm['sub_cat'].options[s7].text==theForm['sub_cat'].options[0].text)sFlg_sub_cat=true;}} for(var s6=0;s6<theForm['main_cat'].length;s6++){if(theForm['main_cat'].options[s6].selected){if(theForm['main_cat'].options[s6].text==theForm['main_cat'].options[0].text)sFlg_main_cat=true;}} if (theForm['code_input'].value != theForm['code_hidden'].value){ errMsg = "#คุณกรอกรหัสยืนยันไม่ถูก กรุณากรอกใหม่ค่ะ#"; setfocus = "['code_input']"; if (theForm['code_input'].value == ""){ errMsg = "#กรุณากรอกรหัสยืนยันด้วยนะคะ#"; setfocus = "['code_input']"; } } if (!emailRE.test(theForm['email_poster'].value)){ errMsg = "#คุณกรอกอีเมล์ไม่ถูกต้อง กรุณาตรวจสอบอีเมล์ใหม่อีกครั้งนะคะ#"; setfocus = "['email_poster']"; if (theForm['email_poster'].value == ""){ errMsg = "#กรุณากรอกอีเมล์ผู้โพสด้วยนะคะ#"; setfocus = "['email_poster']"; } } if (theForm['poster_name'].value.length < 5){ errMsg = "#ชื่อผู้โพสต้องมีความยาวไม่น้อยกว่า 5 ตัวอักษรนะคะ#"; setfocus = "['poster_name']"; } else if(theForm['poster_name'].value.length > 10){ errMsg = "#ชื่อผู้โพสต้องมีความยาวไม่เกิน 10 ตัวอักษรนะคะ#"; setfocus = "['poster_name']"; } if (theForm['poster_name'].value == ""){ errMsg = "#กรุณากรอกชื่อผู้โพสด้วยนะคะ#"; setfocus = "['poster_name']"; } if (sFlg_sub_cat){ errMsg = "#กรุณาเลือกหมวดหมู่ย่อยเว็บไซต์ด้วยนะคะ#"; setfocus = "['sub_cat']"; } if (sFlg_main_cat){ errMsg = "#กรุณาเลือกหมวดหมู่หลักเว็บไซต์ด้วยนะคะ#"; setfocus = "['main_cat']"; } if (theForm['keyword'].value.length < 5){ errMsg = "#คีย์เวิร์ดต้องมีความยาวไม่น้อยกว่า 5 ตัวอักษรนะคะ#"; setfocus = "['keyword']"; } else if(theForm['keyword'].value.length > 150){ errMsg = "#คีย์เวิร์ดต้องมีความยาวไม่เกิน 150 ตัวอักษรนะคะ#"; setfocus = "['keyword']"; } if (theForm['keyword'].value == ""){ errMsg = "#กรุณากรอกคีย์เวิร์ดด้วยนะคะ#"; setfocus = "['keyword']"; } if (theForm['detail'].value.length < 20){ errMsg = "#คำบรรยายต้องมีความยาวไม่น้อยกว่า 20 ตัวอักษรค่ะ#"; setfocus = "['detail']"; } else if(theForm['detail'].value.length > 150){ errMsg = "#คำบรรยายต้องมีความยาวไม่เกิน 150 ตัวอักษรค่ะ#"; setfocus = "['detail']"; } if (theForm['detail'].value == ""){ errMsg = "#กรุณากรอกคำบรรยายด้วยนะคะ#"; setfocus = "['detail']"; } if (!alphaRE.test(theForm['homepage'].value)){ errMsg = "#ชื่อโฮมเพจต้องเป็นตัวอักษรเท่านั้นนะคะ#"; setfocus = "['homepage']"; } else if (theForm['homepage'].value.length < 20){ errMsg = "#ชื่อโฮมเพจต้องมีความยาวไม่น้อยกว่า 20 ตัวอักษรค่ะ#"; setfocus = "['homepage']"; } else if(theForm['homepage'].value.length > 100){ errMsg = "#ชื่อโฮมเพจต้องมีความยาวไม่เกิน 100 ตัวอักษรค่ะ#"; setfocus = "['homepage']"; } if (theForm['homepage'].value == ""){ errMsg = "#กรุณากรอกชื่อโฮมเพจด้วยนะคะ#"; setfocus = "['homepage']"; } if (!userRE0.test(theForm['url'].value)){ errMsg = "#ระบุ URL ให้ถูกต้อง ขึ้นต้นด้วย http:// กรุณากรอกใหม่อีกครั้งนะคะ#"; setfocus = "['url']"; if (theForm['url'].value == ""){ errMsg = "#กรุณากรอก URL ของเว็บไซต์ด้วยนะคะ#"; setfocus = "['url']"; } } if (errMsg != ""){ alert(errMsg); eval("theForm" + setfocus + ".focus()"); } else theForm.submit(); } $(document).ready(function(){ $("#detail").keyup(function(){ var new_length = $(this).val().length; $('#detail_limit1').val( 200 - new_length ); return(false); }); $("#keyword").keyup(function(){ var new_length = $(this).val().length; $('#detail_limit2').val( 200 - new_length ); return(false); }); }); //--> </script> <style type="text/css"> #hintbox{ /*กรอบคำอธิบาย */ position:absolute; top: 0; background-color: #000000; width: 150px; /*เส้นขอบ*/ padding: 3px; border:1px solid black; line-height:18px; z-index:100; border-right: 3px solid black; border-bottom: 3px solid black; visibility: hidden; font-family: Verdana; font-size: 11px; font-style: normal; font-weight: normal; font-variant: normal; color: #FFFFFF; } </style> <script type="text/javascript"> var horizontal_offset="9px" //ระยะห่างขาตำแหน่งของ ปุ่ม var vertical_offset="0" //ไม่ต้องเปลี่ยน var ie=document.all var ns6=document.getElementById&&!document.all function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1 if (whichedge=="rightedge"){ var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset) } else{ var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight } return edgeoffset } function showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) && document.getElementById("hintbox")){ dropmenuobj=document.getElementById("hintbox") dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" dropmenuobj.style.visibility="visible" obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility="hidden" dropmenuobj.style.left="-500px" } function createhintbox(){ var divblock=document.createElement("div") divblock.setAttribute("id", "hintbox") document.body.appendChild(divblock) } if (window.addEventListener) window.addEventListener("load", createhintbox, false) else if (window.attachEvent) window.attachEvent("onload", createhintbox) else if (document.getElementById) window.onload=createhintbox </script> </head> <body> <? function ranDomStr($length){ $str2ran = 'abcdefghijklmnopqrstuvwxyz0123456789'; //string ที่เป็นไปได้ที่จะใช้ในการ random ซึ่งสามารถเพิ่มลดได้ตามความต้องการ $str_result = ""; //สตริงว่างสำหรับจะรับค่าจากการ random while(strlen($str_result)<$length){ //วนลูปจนกว่าจะได้สตริงตามความยาวที่ต้องการ $str_result .= substr($str2ran,(rand()%strlen($str2ran)),1); //ต่อ string จาก substring ที่ได้จากการ random ตำแหน่ง ทีละ 1 ตัว //จนกว่าจะครบตรามความยาวที่ส่งมา } return($str_result);//ส่งค่ากลับ } $ran_str = randomstr(6); //สั่ง random string ?> <form action="captcha/result.php" method="post" name="formADD" id="formADD" onsubmit="VF_formADD();return false;"> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td align="right"> </td> <td> </td> </tr> <tr> <td width="37%" align="right">*URL : </td> <td width="63%"><input name="url" type="text" id="url" size="50" /> <a href="#" onMouseover="showhint('คุณต้องกรอกข้อมูลตำแหน่งของเว็บไซต์ เริ่มต้นด้วย http:// ค่ะ.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right">*ชื่อโฮมเพจ : </td> <td><input name="homepage" type="text" id="homepage" size="50" /> <a href="#" onMouseover="showhint('คุณต้องกรอกข้อมูลชื่อโฮมเพลของเว็บไซตด้วยค่ะ์.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right">*คำบรรยาย : </td> <td><textarea name="detail" cols="40" rows="5" id="detail" ></textarea> <a href="#" onMouseover="showhint('คุณต้องกรอกข้อมูลคำบรรยายของเว็บไซตด้วยค่ะ์.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a><br> Limit: <input name="detail_limit1" type="text" id="detail_limit1" value="200" size="4" readonly="readonly" disabled="disabled"></td></tr> <tr> <td align="right">*คีย์เวิร์ด : </td> <td><textarea name="keyword" cols="40" rows="5" id="keyword"></textarea> <a href="#" onMouseover="showhint('คุณต้องกรอกข้อมูลคีย์เวิร์ดของเว็บไซต์ คั่นด้วยเครื่องหมาย (,) เช่น กีฬา, กิจกรรมยามว่าง ค่ะ.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a> Limit: <input name="detail_limit2" type="text" id="detail_limit2" value="200" size="4" readonly="readonly" disabled="disabled"></td> </tr> <tr> <td align="right">*หมวด :</td> <td> <span id="maincatDiv"><label for="main_cat">หมวดหมู่หลัก :</label> <select name="main_cat" id="main_cat" onchange="dochange('main_cat')"> <option value="<?php echo $main_cat; ?>">--------------------------------</option> </select></span> <a href="#" onMouseover="showhint('คุณต้องเลือกหมวดหมู่หลักของเว็บไซต์.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right"> </td> <td><span id="subcatDiv"><label for="sub_cat">หมวดหมู่ย่อย :</label> <select name="sub_cat" id="sub_cat" onchange="dochange('sub_cat')"> <option value="<?php echo $sub_cat; ?>">---------------------------------</option> </select></span> <a href="#" onMouseover="showhint('คุณจะเลือกหมวดหมู่ย่อยของเว็บไซต์หรือไม่ก็ได้.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right">*ชื่อผู้กรอก : </td> <td><input name="poster_name" type="text" id="poster_name" size="40" /> <a href="#" onMouseover="showhint('คุณต้องระบุชื่อผู้กรอกเว็บไซต์.', this, event, '150px')"> <img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right">*อีเมล์ผู้กรอก :</td> <td><input name="email_poster" type="text" id="email_poster" size="40" /> <a href="#" onMouseover="showhint('คุณต้องระบุอีเมล์จริงเพื่อใช้ในการยืนยันเว็บไซต์ด้วยค่ะ.', this, event, '150px')"><img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right">*Security Code : </td> <td><img src="captcha/pic_text.php?str=<?=$ran_str?>" /> <input name="code_input" type="text" id="code_input" size="13" /><input type="hidden" name="code_hidden" value="<?=$ran_str?>"> <a href="#" onMouseover="showhint('คุณต้องกรอกรหัสยืนยันด้วยค่ะ.', this, event, '150px')"> <img src="img/info.gif" width="20" height="20" border="0" align="absbottom" /></a></td> </tr> <tr> <td align="right"> </td> <td><input type="submit" name="Submit" value="เพิ่มเว็บไซต์" /> <input type="reset" name="Reset" value="ล้างข้อมูล" /></td> </tr> </table> </form> <script type="text/javascript"> //AJAX function Inint_AJAX() { try { return new ActiveXObject( "Msxml2.XMLHTTP" ); } catch ( e ) { }; try { return new ActiveXObject( "Microsoft.XMLHTTP" ); } catch ( e ) { }; try { return new XMLHttpRequest(); } catch ( e ) { }; alert( "XMLHttpRequest not supported" ); return null; }; function dochange( obj ) { var req = Inint_AJAX(); var main_cat = document.getElementById( 'main_cat' ).value; if ( obj && obj.name == 'main_cat' ) //เมื่อทำการเลือที่จังหวัดมา ให้เคลียร์ค่าอำเภอ { var sub_cat = ""; } else //เลือกรายการอื่น { var sub_cat = document.getElementById( 'sub_cat' ).value; }; var data = "main_cat=" + main_cat + "&sub_cat=" + sub_cat; req.onreadystatechange = function() { if ( req.readyState == 4 ) { if ( req.status == 200 ) { var datas = eval( '(' + req.responseText + ')' ); // JSON document.getElementById( 'maincatDiv' ).innerHTML = datas[0].main_cat; document.getElementById( 'subcatDiv' ).innerHTML = datas[0].sub_cat; }; }; }; req.open( "post" , "catagoly.php" , true ); //สร้าง connection req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); // set Header req.send( data ); //ส่งค่า }; //โหลดครั้งแรก window.onload = function() { dochange( '' ); }; </script> </body> </html> นี้เป็นโค้ด catagoly.php ครับ <? header( "Expires: Sat, 1 Jan 2005 00:00:00 GMT" ); header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )."GMT" ); header( "Cache-Control: no-cache, must-revalidate" ); header( "Pragma: no-cache" ); header( "content-type: application/x-javascript; charset=UTF-8" ); $main_cat = $_POST[main_cat]; $sub_cat = $_POST[sub_cat]; $hostname_conn = "localhost"; $username_conn = "root"; $password_conn = "root"; $database_conn = "thaiindexz"; mysql_connect( $hostname_conn , $username_conn , $password_conn ) or die( "เชื่อมต่อฐานข้อมูลไม่ได้" ); mysql_select_db( $database_conn ) or die( "เลือกฐานข้อมูลไม่ได้" ); // เลือกฐานข้อมูล //ให้คืนค่าจังหวัดไว้เป็นอันดับแรก $sql = "SELECT * FROM main_catagoly"; $result = mysql_query( $sql ); echo "[{\"main_cat\":\""; echo "<label for='main_cat'>หมวดหมู่หลัก :</label>"; echo "<select name='main_cat' id='main_cat' onchange='dochange(this)'>"; echo "<option value='0'>--กรุณาเลือกหมวดหมู่หลัก--</option>"; while( $fetcharr = mysql_fetch_array( $result ) ) { $id = $fetcharr[id_main]; $name = $fetcharr[main_catagoly]; echo "<option value='$id'"; if ( $main_cat == $id ) //เลือกจังหวัดที่เลือกไว้ { echo " selected='selected'"; }; echo ">$name</option>"; }; echo "</select>\",\"sub_cat\":\""; echo "<label for='sub_cat'>หมวดหมู่ย่อย :</label>"; echo "<select name='sub_cat' id='sub_cat' onchange='dochange(this)'>"; //ถ้ามีการเลือกจังหวัดมาแล้วให้แสดงอำเภอต่อ if ( $main_cat != "0" && $main_cat != "" ) { echo "<option value='0'>--กรุณาเลือกหมวดหมู่ย่อย--</option>"; $sql = "SELECT * FROM sub_catagoly WHERE id_main='$main_cat'"; $result = mysql_query( $sql ); while( $fetcharr = mysql_fetch_array( $result ) ) { $id = $fetcharr[id_sub]; $name = $fetcharr[sub_catagoly]; echo "<option value='$id'"; if ( $sub_cat == $id ) //เลือกอำเภอที่เลือกไว้ { echo " selected='selected'"; }; echo ">$name</option>"; }; } else { echo "<option value=''>-------------------------------</option>"; }; echo "</select>\"}]"; mysql_close(); ?> มีสองไฟล์นี้เท่านั้นครับ ช่วยแก้โค้ดให้หน่อยนะครับ อาจารย์ จะเป็นพระคุณอย่างมหาศาล ขอคุณครับ

กรกฎ วิริยะ

ประยุกต์เอาจากบทความละกัน เขียนให้แล้ว

.::{เปรียว}::.

แบบที่ผมกำลังทำอยู่นี่รึป่าว <a lang="utf-8" dir="ltr" target="_blank" href="http://krajay.thport.com">krajay.thport.com</a> 1 2 3 ====================================================== list 1.ยังไม่ถูกเลือก (มีเพียงรายการใน list1 ที่มีให้เลือกได้) list 2.แสดง <option id="list2" value="-1">กรุณาเลือก 1 ก่อน</option>เพียงรายการเดียว list 3.แสดง <option id="list3" value="-1">กรุณาเลือก 1 ก่อน</option>เพียงรายการเดียว |-----------------| |-----------------------| |-----------------------| | ยังไม่ถูกเลือก | | กรุณาเลือก 1 ก่อน | | กรุณาเลือก 1 ก่อน | |-----------------| |-----------------------| |-----------------------| ====================================================== list 1.ถูกเลือกรายการแล้ว list 1.เรียกฟังชันของจาว่าสคริปท์ขึ้นมาอ่านค่า แล้วสั่งให้ล้างข้อมูลใน list 2.ด้วยคำสั่ง document.getElementById('list2').options.length = 0; //ล้างข้อมูลเก่าใน ElementById "list2" ก่อนจะส่งค่า value จาก list 1. ไปค้นหาเอารายการที่ตรงกับค่า vslue มาเขียนลงใน list 2. list 2.แสดง <option id="list2" value="-1">กรุณาเลือกรายการ</option> <option id="list2" value="0">รายการที่ 1</option> <option id="list2" value="1">รายการถัดไป</option> จนถึง <option id="list2" value="n">รายการสุดท้าย</option> list 3.แสดง <option id="list3" value="-1">กรุณาเลือก 1 ก่อน</option>เพียงรายการเดียว list 1.แสดงรายการที่ถูกเลือก |-----------------| |-----------------------| |-----------------------| | ถูกเลือก | | ยังไม่ถูกเลือก | | กรุณาเลือก 2 ก่อน | |-----------------| |-----------------------| |-----------------------| ====================================================== list 1.ถูกเลือกรายการอยู่ก่อนหน้านี้แล้ว list 2.ถูกเลือกรายการแล้ว list 2.เรียกฟังชันของจาว่าสคริปท์ขึ้นมาอ่านค่า แล้วสั่งให้ล้างข้อมูลใน list 3.ด้วยคำสั่ง document.getElementById('list3').options.length = 0; //ล้างข้อมูลเก่าใน ElementById "list3" ก่อนจะส่งค่า value จาก list 2. ไปค้นหาเอารายการที่ตรงกับค่า vslue มาเขียนลงใน list 3. list 3.แสดง <option id="list3" value="-1">กรุณาเลือกรายการ</option> <option id="list3" value="0">รายการที่ 1</option> <option id="list3" value="1">รายการถัดไป</option> จนถึง <option id="list3" value="n">รายการสุดท้าย</option> list 1.แสดงรายการที่ถูกเลือก list 2.แสดงรายการที่ถูกเลือก |-----------------| |-----------------------| |-----------------------| | ถูกเลือก | | ถูกเลือก | | กรุณาเลือก | |-----------------| |-----------------------| |-----------------------| ====================================================== เมื่อเลือก list 3.แล้วก็พร้องส่งข้อมูล