Suppose we will implement the following two <b>select</b>:
<b>Primary <select></b> {A,B,C}
<b>Secondary<select></b> { 1,2,3,4,5,6,7,8,9}
<b>Primary->Secondary rule:</b>
<b></b>
A->{1,2,3}
B->{4,5,6}
C->{7,8,9}
<b>Secondary->Primary rule:</b>
1->A
2->A
3->A
4->B
5->B
6->B
7->C
8->C
9->C
<b>The following definitions:</b>
你正在操作的<select> ::= <b>working select</b>
被動的，即将基于你的操作所産生的<select> ::= <b>desired select</b>
<b> In fact, the implementation is according the following considerations: (</b><b>實作思路)</b>
<b> </b>
1. Let both <select> can accept <b>DOM event</b> ,and bind the related event handle function.
2. Configure the <b>mapping rule</b> in the event handle function.
3. In the event function ,create an <b>Array</b> to store the values of the <options> of <b>desired select</b> based on the <b>index </b>you have chosen from the <b>working select</b>
4. <b>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.</b>
5. Clear all the <options> of <b>desired select</b>.
6. Create the <b>desired select</b> and filling the <options> by the <b>Array</b> created in Step 3.
(Details please see the comments in the <b>javascript</b> file)
<b>Screen Shots:</b>
<b>Primary->Secondary</b>
<b>Initial State:</b>
<a href="http://blog.51cto.com/attachment/201204/104948511.png" target="_blank"></a>
<b>Step 1: (Choose one from the left, for example B, then the right can only have three choice {4,5,6})</b>
<a href="http://blog.51cto.com/attachment/201204/104959383.png" target="_blank"></a>
<b>Step 2 (Choose one from the right ,for example “5” and it shows the result)</b>
<a href="http://blog.51cto.com/attachment/201204/105012713.png" target="_blank"></a>
<b>Secondary->Primary</b>
<a href="http://blog.51cto.com/attachment/201204/105022958.png" target="_blank"></a>
<b>Step1: (Choose one from the right ,for example “7”)</b>
<a href="http://blog.51cto.com/attachment/201204/105031339.png" target="_blank"></a>
<b>Step 2: (then the left <select> will display “C” because of the rule “7->C”)</b>
<a href="http://blog.51cto.com/attachment/201204/105041213.png" target="_blank"></a>
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) {
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) {
if (numberIndex == 3) {
if (numberIndex == 4) {
Alphabets[0] = new Option("B");
if (numberIndex == 5) {
if (numberIndex == 6) {
if (numberIndex == 7) {
Alphabets[0] = new Option("C");
if (numberIndex == 8) {
if (numberIndex == 9) {
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>
</form>
</body>
</html>
本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/840268，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)