Entry
JavaScript: List: Create: Dynamically: Select: How connect 3 lists dynamically created via 3 arrays?
Sep 25th, 2004 09:28
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 08 September 2004 - 05:49 am ------------------
JavaScript: List: Create: Dynamically: Select: How connect 3 lists
dynamically created via 3 arrays?
---
Steps: Overview:
1. -You input or change your given list values in the array (e.g.
with the value 'USA') below
2. -Save the result in a .html file (e.g. c:\temp\ddd.htm)
3. -Load that page in your web browser (e.g. type as URL
c:\temp\ddd.htm)
4. -That should show 3 newly created lists where the chosen option in
one list has selected the corresponding value in the other list
figure: The HTML page with the dynamically created lists
showing the corresponding choices.
Your choice will change if you change the
values in the first list.
+----------------------------------------------------+
| |
| +-------------------------+ |
| |V USA | |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V ENGLISH | |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V HOW DO YOU DO? | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
figure: The HTML page with the dynamically created lists
showing the corresponding choices.
Your choice will change if you change the
values in the first list.
+----------------------------------------------------+
| |
| +-------------------------+ |
| |V FRANCE | |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V FRENCH | |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V COMMENT ALLEZ-VOUS | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
The goal is to use the 3 arrays with your given data
to generate 3 lists.
---
So that array is the only position in your code where you possibly have
to change something.
---
You can also reuse that array for use in your other functions.
---
Note:
The array simulates 1 column of a database table.
--- cut here: begin --------------------------------------------------
<!-- ------------------------------------------------------>
<HTML>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function PROCListCreateListFromArray( arraySA ) {
var minI = 0;
var I = minI;
var maxI = arraySA.length - 1;
//
var s = "";
//
for ( I = minI; I <= maxI; I++ ) {
s = arraySA[ I ];
document.write( "<OPTION>" + s + "</OPTION>" );
}
}
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
function PROCListUpdateFormArray1D( searchS, list, column1SA,
column2SA) {
var minI = 0;
var I = minI;
var maxI = column1SA.length - 1;
//
var s1 = "";
var s2 = "";
var s3 = ""
//
// search the given string in the first column of the 2 column table
//
for ( I = minI; I <= maxI; I++ ) {
s1 = column1SA[ I ];
s2 = column2SA[ I ];
if ( searchS == s1 ) { // if found in the first column, get the
corresponding second column value
s3 = s2;
}
}
//
// search the found second column string in the given list
//
for ( I = minI; I <= maxI; I++ ) {
if ( list.options[ I ] != null ) {
s1 = list.options[ I ].text;
if ( s3 == s1 ) { // if found in the list, select the corresponding
element of the list
list.options[ I ].selected = true;
}
}
}
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA1() {
//
var arraySA = new Array (
[ "Austria" ],
[ "Belgium" ],
[ "Bulgaria" ],
[ "Czechia" ],
[ "Denmark" ],
[ "Egypt" ],
[ "Finland" ],
[ "France" ],
[ "Germany" ],
[ "Greece" ],
[ "Hungary" ],
[ "India" ],
[ "Ireland" ],
[ "Israel" ],
[ "Italy" ],
[ "Luxemburg" ],
[ "Netherlands" ],
[ "Norway" ],
[ "Poland" ],
[ "Portugal" ],
[ "Russia" ],
[ "South Africa" ],
[ "Spain" ],
[ "Sweden" ],
[ "Switzerland" ],
[ "Turkey" ],
[ "United Kingdom" ],
[ "USA" ]
);
//
return( arraySA );
}
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA2() {
//
var arraySA = new Array (
[ "German" ],
[ "Dutch" ],
[ "Bulgarian" ],
[ "Czech" ],
[ "Danish" ],
[ "Arabic" ],
[ "Finnish" ],
[ "French" ],
[ "German" ],
[ "Greek" ],
[ "Hungarian" ],
[ "Hindi" ],
[ "English" ],
[ "Hebrew" ],
[ "Italian" ],
[ "French" ],
[ "Dutch" ],
[ "Norwegian" ],
[ "Polish" ],
[ "Portuguese" ],
[ "Russian" ],
[ "Afrikaans" ],
[ "Spanish" ],
[ "Swedish" ],
[ "German" ],
[ "Turkish" ],
[ "English" ],
[ "English" ]
);
//
return( arraySA );
}
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA3() {
//
var arraySA = new Array (
[ "Sind sie end benuetzer oder Haendler?" ],
[ "Bent u eindgebruiker of distributeur?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Er du endbrukere eller distributoer?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Etes-vous client final ou distributeur?" ],
[ "Sind sie end benuetzer oder Haendler?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Lei e cliente finale o distributore?" ],
[ "Etes-vous client final ou distributeur?" ],
[ "Bent u eindgebruiker of distributeur?" ],
[ "Er du endbrukere eller distributoer?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Ben uw eindgebruiker of distributeure?" ],
[ "Esta usted utente final o distribudor?" ],
[ "Aer du endbrukare eller distributoer?" ],
[ "Sind sie end benuetzer oder Haendler?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ],
[ "Are you end user or distributor?" ]
);
//
return( arraySA );
}
</SCRIPT>
<!-- ------------------------------------------------------>
<BODY
>
<SCRIPT>
var array1SA = FNListCreateArrayExampleSA1();
var array2SA = FNListCreateArrayExampleSA2();
var array3SA = FNListCreateArrayExampleSA3();
</SCRIPT>
<FORM
NAME = "form1"
>
<SELECT
NAME = "list1"
ONCHANGE = '
PROCListUpdateFormArray1D( document.forms.form1.list1.options[
list1.selectedIndex ].text, document.forms.form1.list2, array1SA,
array2SA );
PROCListUpdateFormArray1D( document.forms.form1.list2.options[
list2.selectedIndex ].text, document.forms.form1.list3, array2SA,
array3SA );
'
>
<SCRIPT>
PROCListCreateListFromArray( array1SA );
</SCRIPT>
</SELECT>
<BR/>
<BR/>
<SELECT
NAME = "list2"
ONCHANGE = '
PROCListUpdateFormArray1D( document.forms.form1.list2.options[
list2.selectedIndex ].text, document.forms.form1.list3, array2SA,
array3SA );
'
>
<SCRIPT>
PROCListCreateListFromArray( array2SA );
</SCRIPT>
</SELECT>
<BR/>
<BR/>
<SELECT
NAME = "list3"
>
<SCRIPT>
PROCListCreateListFromArray( array3SA );
</SCRIPT>
</SELECT>
</FORM>
</BODY>
</HTML>
<!-- ------------------------------------------------------>
---
---
Internet: see also:
---
JavaScript: List: Create: Array: Loop: Dynamically: Can you give
overview creating <SELECT><OPTION>?
http://www.faqts.com/knowledge_base/view.phtml/aid/31291/fid/178
----------------------------------------------------------------------
