js uses form form select class to implement cascading menu effect

This article introduces how javascript uses the select class in the form form in html to achieve the cascading menu effect. Friends who need it can learn about it

The 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>

I recommend setting it up The value of each option indicates which option the user is selecting.
Use document.getElementById("select1").value; or form1.select1.value; in javascript to get the selected value.
Use the onchange event, and the trigger condition is that the option value of the select changes.

When using the cascading menu

Create two selects, their ids are select1 and select2 respectively.

Create a trigger function javascript function for select1, select1onchange(). In this function, get the value of select1.
Look up the table to get the corresponding value of select2, and add the corresponding option for select2 to reach the level connection effect.

The 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="获得焦点"; 
} 
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是文档中用于输出的自定义的项。 
}

For more related tutorials, please visit

JavaScript video tutorial