Drop down menu form manipulated by javaScript function

Dùng JavaScript function để vận hành drop down menu form

Chép bản html trên vào notepad.Khi mở browser sẽ thấy xuất hiện hình bên cạnh.

Trong bài hướng dẫn nầy chúng ta phải viết hai phần.

* Trước hết chúng ta viết form và chú ý trong form phải có select id =” Menu”, id =”Text”,

id =”Value”.

Tại sao ? Vì chúng ta sẽ dùng document.getElementById("..”) để access Menu,Text và Value.

Nếu không có id thì không thể access được chúng.

Những chữ  SUGAR,CHEESE,BREAD,COOKIES viết màu đỏ là Text item.Những chữ viết màu xanh lá cây là Value.

Text item sẽ xuất hiện trên drop down list khi mở browser.Còn muốn có Value thì phải click vào chữ Select.
*  Viết trong script tags.Chọn một function có tên tuỳ ý.

Vì phải viết những option value theo thứ tự từ trên xuống dưới nên cần phải có  selectedIndex property.Nối property nầy với Menu bằng  document.getElementById(“Menu”).selectedIndex rồi tồn trử nó trong var Index.

Index, text ,value đều ở trong option nhưng option thì ở trong Menu nên :

- Muốn access index của text thì nối options[Index].text với

document.getElement ById(“Menu”) thành ra như sau :

              document.getElement ById(“Menu”).options[Index].text

-  Muốn access index của value thì nối options[Index].value với  document.getElementById(“Menu”) thành ra như sau :

              document.getElement ById(“Menu”).options[Index].value

Sau đó display lần lượt hai dây nối trên vào trong box của input id=”Text” và box của input id=”Value” bằng cách viết thêm :

document.getElementById(”Text”).value = document.getElementById(“Menu”).options[Index].text ;

document.getElementById(”Value”).value = document.getElementById(“Menu”).options[Index].value ;

Dùng onclick="chonHang()" để call function chonHang().

The simple drop down menu manipulated by JavaScript function

Dựa vào hướng dẫn cách viết drop down menu phía trên,chúng ta viết lại một drop down menu khác đơn giản hơn như sau .