Entry
JavaScript: List: Array: Create: How to dynamically create 2 lists from 2 arrays? [<SELECT><OPTION>]
Sep 25th, 2004 09:36
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 08 September 2004 - 09:51 pm ------------------
JavaScript: List: Array: Create: How to dynamically create 2 lists
from 2 arrays? [<SELECT><OPTION>]
---
Steps: Overview:
1. -You input or change your given list values in the 2 arrays (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 a newly created list with your array values
figure: The HTML page with the dynamically created list
+----------------------------------------------------+
| |
| +-------------------------+ |
| |V USA | |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V English | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
The goal is to use the 2 arrays with your given data
to generate 2 lists.
---
So the only position in your code where you possibly have
to change something regarding your data is in the 2 arrays.
---
You can also reuse that arrays for use in your other functions.
---
Note:
The 2 arrays simulate 2 (different) columns of database(s) table(s).
---
So to read a column of your database (instead of a reading an
array) you could use a similar structure of a JavaScript like server
side
program
---
---
You could implement it like this:
--- cut here: begin --------------------------------------------------
<!-- ------------------------------------------------------>
<HTML>
<!-- ------------------------------------------------------>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsNew( formnameS, listnameS,
arraySA ) {
var I = 0;
var minI = 0;
var maxI = arraySA.length - 1;
//
var s = "";
//
for ( I = minI; I <= maxI; I++ ) {
s = arraySA[ I ];
document.write( eval( 'document.forms.' + formnameS + '.' +
listnameS + '.options.options[' + I + '] = new Option( s, s );' ) );
}
//
}
</SCRIPT>
<!-- ------------------------------------------------------>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExample1SA() {
//
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>
<!-- ------------------------------------------------------>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExample2SA() {
//
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>
<!-- ------------------------------------------------------>
<BUTTON
ONCLICK = '
document.forms.yourformname.yourlistname1.options[ 3 ].selected =
true;
document.forms.yourformname.yourlistname2.options[ 3 ].selected =
true;
'
>Your button caption</BUTTON>
<FORM
NAME = "yourformname"
>
<SELECT
NAME = "yourlistname1"
>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname1",
FNListCreateArrayExample1SA() );
</SCRIPT>
</SELECT>
<SELECT
NAME = "yourlistname2"
>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname2",
FNListCreateArrayExample2SA() );
</SCRIPT>
</SELECT>
</FORM>
</HTML>
<!-- ------------------------------------------------------>
--- cut here: end ----------------------------------------------------
---
---
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
----------------------------------------------------------------------
