Js uses the form select class to implement cascading menu effects _ basic knowledge

This article describes how to use the select class in the form in html to implement cascading menu effects in javascript. For more information, see the following example:

The Code is as follows:

We recommend that you set the value of each option to indicate which option the user selects.
Use document. getElementById ("select1"). value; or form1.select1. value in javascript;
Then you can obtain the selected value.
The onchange event is triggered when the select option value is changed.

When using cascading menus
Create two select statements whose IDs are select1 and select2.
Create the trigger function javascript function for select1, select1onchange (). In this function, obtain the value of select1,
Check the table to obtain the corresponding select2 value, and add corresponding options for select2 to achieve cascade effect.

The Code is as follows:

1 2 3 4

Function t1onfocus ()
{
Document. getElementById ("p1"). innerHTML = "Get Focus ";
}
Function select1onchange ()
{
Var I;
For (I = 10; I> = 0; I --)
Form1.select2. remove (I );
Var objOption;
For (I = 0; I <= 9; I ++)
{
ObjOption = document. createElement ("OPTION ");
ObjOption. text = form1.select1. value * 10 + I;
ObjOption. value = form1.select1. value * 10 + I;
Form1.select2. options. add (objOption );
}
}
Function select2onchange ()
{
P1.innerHTML = form1.select2. value; // p1 is the custom item used for output in the document.
}