หลังจากที่ได้กล่าวถึงเรื่อง regular expressions ไปแล้วได้เข้าไปยังเว็บบอร์ดแห่งหนึ่ง(ไม่พาดพิงแล้วกันนะครับ) ได้พบคำถามเกี่ยวกับ การใช้ dynamic select item มีการเลือก select อันแรกแล้ว ให้ select อันที่สอง มีการเปลี่ยนแปลงสัมพันธ์กับ select อันแรก โดยตัวอย่างเช่น select อันแรกเป็นรายชื่อ list ของจังหวัด และ select อันที่สองต้องการให้มี list ของอำเภอในแต่ละจังหวัด จะเห็นว่าเราไม่สามารถเขียนให้ select อันที่สองเป็นแบบ static ได้เลยครับ เราจะมาดูกันว่าสามารถทำได้อย่างไร

มาดูรูปแบบของฟอร์มกัน

<form name="f">
<select name="select1" onchange="changeSelect2(this)">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select name="select2" disabled></select>
</form>

ที่นี้เรามาดู Javascript กันครับ
<script language="Javascript">
function changeSelect2(obj){
    var theform = obj.form;
    theform.select2.length = 0;
    switch(obj.value){
       case "1":
       {
          theform.select2.options[0] = new Option('1.1','1.1');
          theform.select2.options[1] = new Option('1.2','1.2');
          theform.select2.options[2] = new Option('1.3','1.3');
          theform.select2.options[3] = new Option('1.4','1.4');
          theform.select2.disabled = false;
       }
       break;

       case "2":
       {
          theform.select2.options[0] = new Option('2.1','2.1');
          theform.select2.options[1] = new Option('2.2','2.2');
          theform.select2.options[2] = new Option('2.3','2.3');
          theform.select2.options[3] = new Option('2.4','2.4');
          theform.select2.disabled = false;
       }
       break;

       case "3":
       {
          theform.select2.options[0] = new Option('3.1','3.1');
          theform.select2.options[1] = new Option('3.2','3.2');
          theform.select2.options[2] = new Option('3.3','3.3');
          theform.select2.options[3] = new Option('3.4','3.4');
          theform.select2.disabled = false;
       }
       break;
    }
}
</script>

อธิบายครับ
จากโค๊ดข้างบนจะเห็นว่ามีเฉพาะ select1 เท่านั้นที่ทำการใส่ค่าเอาไว้ ส่วน select2 นั้นสร้างเอาไว้โดยไม่มีการใส่ค่าข้างใน และทำการ desabled เอาไว้ด้วย

ส่วนของ Javascript นั้น เมื่อมีการเปลี่ยนแปลงที่ select1 นั้นจะมีการเรียกฟังก์ชั่น changeSelect2 และมีการส่ง parameter เป็น object ของ select1 มาด้วย

การทำงานของฟังก์ชั่นนี้ จะเห็นว่ามีการประกาศตัวแปร theform โดยเป็น object ที่อ้างถึง form ที่ select1 อยู่ และมีการทำการอ้างถึงค่าที่ seelect1 ส่งมาโดยอ้างผ่าน obj ที่ผ่านส่งเป็น parameter ของฟังก์ชั่น พระเอกของระบบนี้คือการสร้าง object option ให้กับ select2 โดยเรียกใช้ constructor Option() โดย parameter ที่ต้องส่งให้มี 2 parameters ครับ มาดูตัวอย่าง การใช้งาน constructor นี้กัน

Option(string label,string value);

Paremeter :
label = เป็นตัวอักษรที่ต้องการให้โชว์ใน select
value = เป็นค่าของ option ที่ทำการสร้างขึ้น

หลังจากทำการสร้าง option ตามจำนวนที่ต้องการแล้วก็ทำการ enable select2 ด้วยการ set properties disabled ให้มีค่าเป็น false

แล้วถ้าหากว่าต้องการให้เรียกค่าข้อมูลจากฐานข้อมูลหละครับ

โดยใน select1 ก็เรียกจากฐานข้อมูล และใน Select2

ก็เรียกจากฐานข้อมูลเหมือนกันนะครับ

จะทำยังไง

ลองอ่านกระทู้นี้เพิ่มเติมครับเป็นตัวอย่างในรูปแบบ ASP
การทำ Combo Box
การทำ Combo Box (ต่อ)
ลองเอาไปประยุกต์ดูครับ