Js uses the form select class to implement cascading menu Effects

Use Cases:
Copy codeThe Code is as follows:
<Form name = "form1" method = "POST" action = "-- WEBBOT-SELF --">
<Select id = "select1" onchange = "select1onchange ()">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> 4 </option>
</Select>
</Form>

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.
Copy codeThe Code is as follows:
<Select id = "select1" onchange = "select1onchange ()">
<Option value = "1"> 1 </option>
<Option value = "2"> 2 </option>
<Option value = "3"> 3 </option>
<Option value = "4"> 4 </option>
</Select>
<Select id = "select2" onchange = "select2onchange ()">
</Select>
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.
}