JS Multilevel Link Menu _ form effect

Source: Internet
Author: User
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <ptml> <pead> <title>js linkage dropdown box ;/title> <meta name= "generator content=" Microsoft FrontPage 4.0 "> <meta name=" ProgId "content=" Frontpag E.editor.document "> <meta name=" originator content= "Microsoft Visual Studio. NET 7.1" > <script language = "JavaScript" >/* * * * ======================================================================================== ========== * * Class Name: Class_liandong_yao * * Function: Multi-level LINK Menu * * * Author: Yaodayizi * * ===================== ============================================================================= **/function CLASS_LIANDONG_YAO ( Array) {//arrays, linkage data source this.array=array; This.indexname= '; This.obj= '; Set Sub Select//parameter: Select ID of the current onchange, select ID this.subselectchange=function to set (selectname1,selectname2) {//try//{ var obj1=document.all[selectname1]; var obj2=document.all[selectname2]; var objname=this.tostring (); var me=this; Obj1.onchange=function () {Me.optionchange (this.options[this.selectedindex].value,obj2.id)} //Set the first select//parameter: IndexName refers to the selected item, Selectname refers to the ID this.firstselectchange=function of the Select (Indexn Ame,selectname) {This.obj=document.all[selectname]; This.indexname=indexname; This.optionchange (This.indexname,this.obj.id)}//IndexName refers to the selected item Selectname refers to the ID of the select This.optioncha Nge=function (indexname,selectname) {var obj1=document.all[selectname]; var me=this; obj1.length=0; Obj1.options[0]=new option ("Please select", ""); for (Var i=0;i<this.array.length;i++) {if (this.array[i][1]==indexname) {//al ERT (this.array[i][1]+ "" +indexname); Obj1.options[obj1.length]=new Option (This.arrayI [2],this.array[i][0]); {}}} </script> </pead> <body> <form name= "Form1" method= " Post ">   <select id=" S1 "name=" S1 "> <option selected></option> </ select> <select id= "s2" name= "s2" > <option selected></option> </SELECT> <select id= "S3" Name= "S3" > <option selected></option> </SELECT> <select id= "x1" name= "x1" > <option selected></option> </SELECT> < Select Id= "X2" name= "x2" > <option selected></option> </SELECT> <select id= "X3" "Name=" x3 "> <option selected></option> </SELECT> <select id=" x4 "name=" x4 "> <option selected></option> </SELECT> <select id= "x5" name= "x5" > <option selected></option> </SELECT> </form> </body> <script language= "JavaScript" >//Example 1-------------------------------------------------------------//Data SOURCE var array=new array (); Array[0]=new Array ("South China", "root directory", "South China"); Data format ID, parent ID, name array[1]=new array ("North China", "root directory", "North China"); Array[2]=new Array ("Shanghai", "South China", "Shanghai"); Array[3]=new Array ("Guangdong", "South China", "Guangdong"); Array[4]=new Array ("Xujiahui", "Shanghai", "Xujiahui"); Array[5]=new Array ("Phut", "Shanghai", "Phut"); Array[6]=new Array ("Guangzhou", "Guangdong", "Guangzhou"); Array[7]=new Array ("Zhanjiang", "Guangdong", "Zhanjiang"); --------------------------------------------//This is the calling code var liandong=new class_liandong_yao (Array)//setting Data source Liando Ng.firstselectchange ("root directory", "S1"); Sets the first selection box Liandong.subselectchange ("S1", "S2"); Sets the child selection box Liandong.subselectchange ("S2", "S3"); Example 2-------------------------------------------------------------//Data source var array2=new Array()//Data format ID, parent ID, name Array2[0]=new Array ("Test test", "root directory", "Test test"); Array2[1]=new Array ("North China", "root directory", "North China"); Array2[2]=new Array ("Shanghai", "Test test", "Shanghai"); Array2[3]=new Array ("Guangdong", "Test test", "Guangdong"); Array2[4]=new Array ("Xujiahui", "Shanghai", "Xujiahui"); Array2[5]=new Array ("Phut", "Shanghai", "Phut"); Array2[6]=new Array ("Guangzhou", "Guangdong", "Guangzhou"); Array2[7]=new Array ("Zhanjiang", "Guangdong", "Zhanjiang"); Array2[8]=new Array ("Don't Know", "Zhanjiang", "Don't Know"); Array2[9]=new Array ("5555", "Zhanjiang", "555"); Array2[10]=new Array ("++++", "Don't Know", "++++"); Array2[11]=new Array ("111", "Xujiahui", "111"); Array2[12]=new Array ("222", "111", "222"); Array2[13]=new Array ("333", "222", "333"); --------------------------------------------//This is the calling code//setting data source var liandong2=new Class_liandong_yao (array2); Sets the first selection box Liandong2.firstselectchange ("root", "x1"); Sets the child selection box Liandong2.subselectchange ("x1", "X2") liandong2.subselectchange ("X2", "x3") Liandong2.subselectchange ("x3") , "x4") Liandong2.subselectchange ("X4", "x5") </script> &Lt;/html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.