Entry
JavaScript: How create 2 connected lists dynamically (3 arrays in 3 include files)? 1 [one to many]
Sep 25th, 2004 09:59
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 23 September 2004 - 09:18 pm ------------------
JavaScript: How create 2 connected lists dynamically (2 arrays stored
in 2 include src files)?
By separating your data and your program in separate files maintenance
and centralization of your data becomes easier.
---
Steps: Overview:
1. -Save the main file below as a .html file
(e.g. 'array12.htm')
2. -Save data1 file with your array
(e.g. as 'yourarray1.js')
in the same directory.
This is your main data file.
3. -Save data2 file with your array
(e.g. as 'yourarray2.js')
in the same directory.
This is your connectedfile.
4. -Run the main .html file in your browser
(e.g. 'array12.htm')
1. -That should show 2 newly created lists where the chosen option
in list1 has selected the corresponding value in the other
list2.
---
---
Steps: Worked out:
1. -Save the main file below as a .html file
(e.g. 'array12.htm')
--- 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"
SRC="yourarray1.js"
>
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT
LANGUAGE="JavaScript"
SRC="yourarray2.js"
>
</SCRIPT>
<!-- ------------------------------------------------------>
<BODY
>
<SCRIPT>
var array1SA = FNListCreateArrayExampleSA1();
var array2SA = FNListCreateArrayExampleSA2();
</SCRIPT>
<FORM
NAME = "form1"
>
<SELECT
NAME = "list1"
ONCHANGE = ' PROCListUpdateFormArray1D(
document.forms.form1.list1.options[ list1.selectedIndex ].text,
document.forms.form1.list2, array1SA, array2SA )';
>
<SCRIPT>
PROCListCreateListFromArray( array1SA );
</SCRIPT>
</SELECT>
<BR/>
<BR/>
<SELECT
NAME = "list2"
>
<SCRIPT>
PROCListCreateListFromArray( array2SA );
</SCRIPT>
</SELECT>
</FORM>
</BODY>
</HTML>
<!-- ------------------------------------------------------>
2. -Save data1 file with your array
(e.g. as 'yourarray1.js')
in the same directory.
This is your main data file.
--- cut here: end ----------------------------------------------------
---
---
--- cut here: begin --------------------------------------------------
<!-- 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 );
}
--- cut here: end ----------------------------------------------------
3. -Save data2 file with your array
(e.g. as 'yourarray2.js')
in the same directory.
This is your connectedfile.
--- cut here: begin --------------------------------------------------
<!-- 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 );
}
--- cut here: end ----------------------------------------------------
4. -Run the main .html file in your browser
(e.g. 'array12.htm')
1. -That should show 2 newly created lists where the chosen option
in list1 has selected the corresponding value in the other
list2.
---
---
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 | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
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 | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
The goal is to use the 2 arrays with your given data
to generate 2 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.
---
---
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
----------------------------------------------------------------------
