双向二级联动的实现

 Suppose we will implement the following two select:

Primary <select>     {A,B,C}

Secondary<select>  { 1,2,3,4,5,6,7,8,9}

Primary->Secondary rule:

A->{1,2,3}

B->{4,5,6}

C->{7,8,9}

Secondary->Primary rule:

1->A

2->A

3->A

4->B

5->B

6->B

7->C

8->C

9->C

The following definitions:

你正在操作的<select> ::= working select

被动的，即将基于你的操作所产生的<select> ::= desired select

 In fact, the implementation is according the following considerations: (实现思路)

1.       Let both <select> can accept DOM event ,and bind the related event handle function.

2.       Configure the mapping rule in the event handle function.

3.       In the event function ,create an Array to store the values of the  <options> of desired select based on the index you have chosen from the working select

4.       Please Note: in event function ,you must set the other <select> ‘s event handle method to be empty in order to prevent it to process its event recursively.

5.       Clear all the <options> of desired select.

6.       Create the desired select and filling the <options> by the Array created in Step 3.

    (Details please see the comments in the javascript file)

Screen Shots:

Primary->Secondary

Initial State:

Step 1: (Choose one from the left, for example B, then the right can only have three choice {4,5,6})

Step 2 (Choose one from the right ,for example “5” and it shows the result)

Secondary->Primary

Initial State:

Step1: (Choose one from the right ,for example “7”)

Step 2: (then the left <select> will display “C” because of the rule “7->C”)

Implementation:

js:

1. /** 
2.  * This function will render the secondary select according to the primart select 
3.  */ 
4. function createNumbers(){ 
5.     //create an alphabetIndex which stands for the selected index from the primary <select> 
6.     var alphabetIndex =document.testform.alphabets.selectedIndex; 
7.      
8.     //if the first index (the prompt is selected) then ignore it 
9.     if ((alphabetIndex == null) || (alphabetIndex == 0)) return; 
10.  
11.   //binding the <options> based on the index you have chosen from the primary <select> 
12.    
13.   if (alphabetIndex == 1) { 
14.   
15.   //create an array which can hold all the <options> of the secondary select 
16.   var Numbers = new Array(); 
17.   Numbers[0] = new Option("1"); 
18.   Numbers[1] = new Option("2"); 
19.   Numbers[2] = new Option("3"); 
20.    
21.  
22.   } 
23.    
24.   if (alphabetIndex ==2) { 
25.      
26.     var Numbers = new Array(); 
27.     Numbers[0] = new Option("4"); 
28.     Numbers[1] = new Option("5"); 
29.     Numbers[2] = new Option("6"); 
30.      
31.      
32.   } 
33.    
34.   if (alphabetIndex ==3) { 
35.      
36.     var Numbers = new Array(); 
37.     Numbers[0] = new Option("7"); 
38.     Numbers[1] = new Option("8"); 
39.     Numbers[2] = new Option("9"); 
40.      
41.  
42.   } 
43.    
44.   //empty all the existing options from the secondary <select> 
45.   for (i=document.testform.numbers.options.length; i>0; i--) {  
46.   document.testform.numbers.options[i] = null; 
47.   } 
48.  
49.   //set all the <options> of the secondary <select> to be from the created Array  
50.   for(i=0; i<Numbers.length; i++) { 
51.   document.testform.numbers.options[i] = Numbers[i]; 
52.   } 
53.  
54.   //set the first <option> of the secondary <select> to be "selected" status 
55.   document.testform.numbers.options[0].selected = true; 
56.    
57.   //This line is very important 
58.   //to prevent the event from the secondary<select> that may cause the primary<select> to execute createAlphabets() 
59.   document.testform.numbers.onchange=function(){}; 
60.  
61. } 
62.  
63.  
64. /** 
65.  * This function will render the primary <select> according to the <secondary> select 
66.  */ 
67. function createAlphabets(){ 
68.     var numberIndex =document.testform.numbers.selectedIndex; 
69.     if ((numberIndex == null) || (numberIndex == 0)) return; 
70.  
71.   if (numberIndex == 1) { 
72.  
73.   var Alphabets = new Array(); 
74.   Alphabets[0] = new Option("A");  
75.   } 
76.    
77.   if (numberIndex == 2) { 
78.  
79.   var Alphabets = new Array(); 
80.   Alphabets[0] = new Option("A");  
81.   } 
82.    
83.   if (numberIndex == 3) { 
84.  
85.   var Alphabets = new Array(); 
86.   Alphabets[0] = new Option("A");  
87.   } 
88.    
89.   if (numberIndex == 4) { 
90.  
91.   var Alphabets = new Array(); 
92.   Alphabets[0] = new Option("B");  
93.   } 
94.    
95.   if (numberIndex == 5) { 
96.  
97.   var Alphabets = new Array(); 
98.   Alphabets[0] = new Option("B");  
99.   } 
100.    
101.   if (numberIndex == 6) { 
102.  
103.   var Alphabets = new Array(); 
104.   Alphabets[0] = new Option("B");  
105.   } 
106.    
107.   if (numberIndex == 7) { 
108.  
109.   var Alphabets = new Array(); 
110.   Alphabets[0] = new Option("C");  
111.   } 
112.    
113.   if (numberIndex == 8) { 
114.  
115.   var Alphabets = new Array(); 
116.   Alphabets[0] = new Option("C");  
117.   } 
118.    
119.   if (numberIndex == 9) { 
120.  
121.   var Alphabets = new Array(); 
122.   Alphabets[0] = new Option("C");  
123.   } 
124.    
125.   
126.    
127.   for (i=document.testform.alphabets.options.length; i>0; i--) {  
128.   document.testform.alphabets.options[i] = null; 
129.   } 
130.  
131.   for(i=0; i<Alphabets.length; i++) { 
132.   document.testform.alphabets.options[i] = Alphabets[i]; 
133.   } 
134.  
135.   document.testform.alphabets.options[0].selected = true; 
136.   
137. } 

The html to render the selection:

1. <html> 
2. <head> 
3. <title>Test Bi-Directional Linked Select</title> 
4.  
5. <script  
6.     type="text/javascript"  
7.     src="js/linkedcombobox.js"  
8.     > 
9. </script> 
10. </head> 
11.  
12.  
13. <!--  
14. Suppose A ->{1,2,3} 
15.         B ->{4,5,6} 
16.         C ->{7,8,9} 
17.          
18.         1->A 
19.         2->A 
20.         3->A 
21.         4->B 
22.         5->B 
23.         6->B 
24.         7->B 
25.         8->B 
26.         9->B 
27.  --> 
28.   
29. <form name="testform"> 
30.  
31. Test Bi-Directional Select : 
32.  
33. <select name="alphabets" onchange="createNumbers()"> 
34.  
35.   <option value=" ">Choose an Alphabet</option> 
36.   <option value="A">A</option> 
37.   <option value="B">B</option> 
38.   <option value="C">C</option> 
39.  
40. </select> 
41.  
42. <select name="numbers" onchange="createAlphabets()"> 
43.  
44.   <option value="">Choose a Number</option> 
45.   <option value="1">1</option> 
46.   <option value="2">2</option> 
47.   <option value="3">3</option> 
48.   <option value="4">4</option> 
49.   <option value="5">5</option> 
50.   <option value="6">6</option> 
51.   <option value="7">7</option> 
52.   <option value="8">8</option> 
53.   <option value="9">9</option> 
54.  
55. </select> 
56.  
57. </form> 
58. </body> 
59. </html>