Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> selection </title>
<meta name= "viewport" content= "initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, User-scalable=no "/>
<body>
<select name= "channel" id= "channel" onchange= "Getval (this.options[this.selectedindex].value)" >
<option value= "Please select" >-Please select-</option>
<option value= "even interactive" > even interactive </option>
<option value= "Light and Shadow Infinity" > Light </option>
<option value= "le-Guest Channel" > le-Guest channel </option>
</select>
<select name= "retailer" id= "retailer" >
<option>-Please select-</option>
</select>
</body>
<script>
Onchange= "Getval (this.options[this.selectedindex].value)"
Use the onchange event to get the value of the current option
Get all option options for the current select via This.options
Get the index number of the selected option by This.selectedindex
This will get the value of each option, then match it with the data, get the corresponding data for that option, and populate the next select//define Data array=[["value", "Data 1| data 2| Data 3"],["value", "Data 1| data 2| Data 3"]. The value in the
//definition data is consistent with the value in your option
var valArray = [[even interactive], even if interactive 1| even interactive 2| even interactive 3| even interactive 4 "],[" Light and Shadow Infinity "," Light and Shadow Unlimited 1| " Unlimited 3| Light and Shadow Unlimited 4 "],[" "Le Channel", "1| channel 2| le channel 3| le guest Channel 4"],["select", "-Please select-"] "
function Getval (currval)
{
//the currently selected item , the
var currval = Currval is obtained by the parameter currval;
//Declare variables ahead of time, remember that JavaScript has only function scope, no block-level scope, advance declaration is a good habit
var i,j;
//Empty empty sub-menu Document.all.id Select the child ID
//If you do not know document.all, you can find the relevant information oh
Document.all.retailer.length = 0;for (i = 0; I <valarray.length;i++)
{
Gets the position of the current item in the array
if (valarray[i][0]==currval)
{
Get all the child data for the current item
var Tmpvalarray = valarray[i][1].split ("|")
for (j=0;j<tmpvalarray.length;j++)
{
Fill drop-down menu
Document.all.retailer.options[document.all.retailer.length] = new Option (Tmpvalarray[j],tmpvalarray[j]);
}
}
}
}
After reading, do you want to practice it yourself?
Is it easy to find out, maybe you can also consider the three-level linkage
The overall idea is to get your current options, prepare a regular data format, use the values of the current options to match your data, then fill in the matching values into the next select, and remember to clear them before filling.
</script>
A simple two-level linkage effect, after reading immediately you can also write a (source, pure JS, annotated)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
