Implementation of three-level linkage in js

The implementation of linkage is actually very simple, but some details are easy to make mistakes. Here I would like to share my basic ideas for realizing third-level linkage after learning the second-level linkage.
Idea: Because the second-level linkage is the connection between the first-level linkage and the second-level linkage through the onchange event, the third-level linkage is the connection between the second-level linkage and the third-level linkage. (Maybe the expression is not clear enough) To put it simply, the process is roughly: A event - trigger - B event - trigger - C event.
​ Note: Pay special attention to the matching of the subscript corresponding to the array and the option value. The value of each option in the option option can also be a number. It is more convenient to implement the value with a number.
Example questions:                                                                                                                                                                                                                    First semester—>HTML, Java, SqlServer basics ,C#
First academic year—>Second semester—>javascript,.Net,SqlServer Advanced,JSP
Second academic year—>First semester—>Struts,ASP.NET,Ajax
Second academic year—> The second semester -& gt; spring, hibernate '


code:
java code

& lt;! Doctype html & gt;

& lt; html lang = "en" & lt; & & gt;

& lt; m ETA charset="UTF-8"> Courses

Academic year < select id='year' onchange='change1(this)'>                                                                                                                        < The first school year & lt;/option & gt;

& lt; option value = 'The second school year' & gt; GE2 (this) function to realize the linkage between semester and course-->

semester

t;Please select

                                                                                                                        

var term = document.getElementById('term');

//Get course object

var course = document.getElementById('course');

An // Create the CHANGE1 (OBJ1) function, where the parameter OBJ1 is the value value in the Option option of obtaining the academic year. //Create a two-dimensional array to store the semester corresponding to the academic year

        var array1 = new Array();    

                                                            out out out out off out's out to holder's ‐         out out out out out out out out out out out out over's ’ t i o n and                 ‐ to ’ ’s ’ ’ ‐ ‐‐‐‐‐‐‐‐‐‐‐‐‐‐​​

                 array1[ 'Second School Year'] = ['First Semester', 'Second Semester']; For (var I = 0; I & lt; array1 [o1] .Length; i ++) {

// If it is the first school year, set the value of the first semester to 0, and the value of the second semester is set to 1; var opt1 = new Option(array1[o1][i],i) ;

                                                                                                                                                                               ​ Row subscripts correspond one to one.

Else {p OPT1 = New Option (Array1 [O1] [i], I+2);

}

// dynamic add options OPT1 to TERM, get the drop -down list item

term.options.addddddddddddddddddddd (opt1);

                                                                                                                                                                                          ){

                                                                           

              var o2 = obj2.value;                                                                                                                                                                                                                              

            array2[0]=['HTML','Java','SqlServer Basic','C#'];                                                                                               array2['[0]‐ ‐                              ; Semester drop-down list The first item o Course.options.length = 1;

// traverses the array, and the option OPT2 is in the Course, and the drop -down list item

for (var I in array2 [O2]) {

var OPT2 = new Options(array2[o2][i],i); /script>

Statement：

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

Previous article：js definition and traversal of array objectsNext article：js definition and traversal of array objects

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved