雙向二級聯動的實現

 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:

 

/**
 * This function will render the secondary select according to the primart select
 */
function createNumbers(){
    //create an alphabetIndex which stands for the selected index from the primary <select>
    var alphabetIndex =document.testform.alphabets.selectedIndex;

    //if the first index (the prompt is selected) then ignore it
    if ((alphabetIndex == null) || (alphabetIndex == 0)) return;

  //binding the <options> based on the index you have chosen from the primary <select>

  if (alphabetIndex == 1) {

  //create an array which can hold all the <options> of the secondary select
  var Numbers = new Array();
  Numbers[0] = new Option("1");
  Numbers[1] = new Option("2");
  Numbers[2] = new Option("3");


  }

  if (alphabetIndex ==2) {

    var Numbers = new Array();
    Numbers[0] = new Option("4");
    Numbers[1] = new Option("5");
    Numbers[2] = new Option("6");


  }

  if (alphabetIndex ==3) {

    var Numbers = new Array();
    Numbers[0] = new Option("7");
    Numbers[1] = new Option("8");
    Numbers[2] = new Option("9");


  }

  //empty all the existing options from the secondary <select>
  for (i=document.testform.numbers.options.length; i>0; i--) {
  document.testform.numbers.options[i] = null;
  }

  //set all the <options> of the secondary <select> to be from the created Array
  for(i=0; i<Numbers.length; i++) {
  document.testform.numbers.options[i] = Numbers[i];
  }

  //set the first <option> of the secondary <select> to be "selected" status
  document.testform.numbers.options[0].selected = true;

  //This line is very important
  //to prevent the event from the secondary<select> that may cause the primary<select> to execute createAlphabets()
  document.testform.numbers.onchange=function(){};

}


/**
 * This function will render the primary <select> according to the <secondary> select
 */
function createAlphabets(){
    var numberIndex =document.testform.numbers.selectedIndex;
    if ((numberIndex == null) || (numberIndex == 0)) return;

  if (numberIndex == 1) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("A");
  }

  if (numberIndex == 2) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("A");
  }

  if (numberIndex == 3) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("A");
  }

  if (numberIndex == 4) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("B");
  }

  if (numberIndex == 5) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("B");
  }

  if (numberIndex == 6) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("B");
  }

  if (numberIndex == 7) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("C");
  }

  if (numberIndex == 8) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("C");
  }

  if (numberIndex == 9) {

  var Alphabets = new Array();
  Alphabets[0] = new Option("C");
  }



  for (i=document.testform.alphabets.options.length; i>0; i--) {
  document.testform.alphabets.options[i] = null;
  }

  for(i=0; i<Alphabets.length; i++) {
  document.testform.alphabets.options[i] = Alphabets[i];
  }

  document.testform.alphabets.options[0].selected = true;

}

The html to render the selection:

 

<html>
<head>
<title>Test Bi-Directional Linked Select</title>

<script
    type="text/javascript"
    src="js/linkedcombobox.js"
    >
</script>
</head>


<!--
Suppose A ->{1,2,3}
        B ->{4,5,6}
        C ->{7,8,9}

        1->A
        2->A
        3->A
        4->B
        5->B
        6->B
        7->B
        8->B
        9->B
 -->

<form name="testform">

Test Bi-Directional Select :

<select name="alphabets" onchange="createNumbers()">

  <option value=" ">Choose an Alphabet</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>

</select>

<select name="numbers" onchange="createAlphabets()">

  <option value="">Choose a Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>

</select>

</form>
</body>
</html>