A-AA+then

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

13,750

คือว่าผม จะทำ list menu แบบนี้ครับ เป็น Ajax ตอนนี้ผมทำได้แล้ว แต่ยังทำให้เวลาเราไม่ได้เลือกหมวดย่อยจะไม่สามารถเลือกได้ ถ้าเราเลือกหมวดหลัก หมวดย่อยก็จะแสดงขึ้นมา สามารถเลือกได้
เหมือนเว็บ sanook ครับ : http://webindex.sanook.com/addweb/add-web-step-3.php

นี้เป็นโค้ดหน้าแรก index.php
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"><!--
function VF_formADD(){ //v2.0
<!--start_of_saved_settings-->

<!--type,text,name,code_input,required,true,errMsg,#คุณกรอกรหัสยืนยันไม่ถูกกรุณากรอกใหม่คะ#-->
<!--type,text,name,email_poster,required,true,isEmail,errMsg,#รูปแบบอีเมล์ไม่ถูกต้อง กรุณากรอกใหม่คะ#-->
<!--type,text,name,poster_name,required,true,errMsg,#กรุณากรอกชื่อผู้โพสเว็บไซต์ด้วยนะคะ#-->
<!--type,select,name,sub_cat,isDefault,errMsg,#กรุณาเลือกหมวดหมู่ย่อยเว็บไซต์ด้วยนะคะ#-->
<!--type,select,name,main_cat,isDefault,errMsg,#กรุณาเลือกหมวดหมู่หลักเว็บไซต์ด้วยนะคะ#-->
<!--type,textarea,name,keyword,required,true,fLen,1,50,errMsg,#กรุณากรอกคีย์เวิร์ดเว็บไซต์ด้วยนะคะ#-->
<!--type,textarea,name,detail,required,true,fLen,1,50,errMsg,#กรุณากรอกคำบรรยายเว็บไซต์ด้วยนะคะ#-->
<!--type,text,name,homepage,required,true,isAlpha,errMsg,#กรุณากรอกชื่อโฮมเพจเว็บไซต์ด้วยนะคะ#-->
<!--type,text,name,url,required,true,isRegExp,http://,errMsg,#กรุณากรอกตำแหน่งที่อยู่เว็บไซต์ด้วยนะคะ#-->
<!--end_of_saved_settings-->
 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">&nbsp;</td>
      <td>&nbsp;</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><br />
         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">&nbsp;</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?>" /><br />
      <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">&nbsp;</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();
?>

มีสองไฟล์นี้เท่านั้นครับ ช่วยแก้โค้ดให้หน่อยนะครับ อาจารย์ จะเป็นพระคุณอย่างมหาศาล ขอคุณครับ

2 ความคิดเห็น

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

แบบที่ผมกำลังทำอยู่นี่รึป่าว

krajay.thport.com


        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.แล้วก็พร้องส่งข้อมูล
2
^