Home > Web Front-end > JS Tutorial > js uses form form select class to implement cascading menu effect_Basic knowledge

js uses form form select class to implement cascading menu effect_Basic knowledge

WBOY
Release: 2016-05-16 17:46:04
Original
1325 people have browsed it

The use example is as follows:

Copy code The code is as follows:





I recommend setting the value of each option to indicate where the user is. Which one to choose?
Use document.getElementById("select1").value; or form1.select1.value;
in javascript to get the selected value.
Use the onchange event, and the triggering 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.
Copy code The code is as follows:



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 a custom item used for output in the document.
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template