Entry
JavaScript: List: Array: Create: How to dynamically create a list from array? [<SELECT> <OPTION>]
Sep 25th, 2004 09:42
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 07 September 2004 - 09:37 pm ------------------
JavaScript: List: Array: Create: How to dynamically create a list from
array? [<SELECT> <OPTION>]
---
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 a newly created list with your array values
figure: The HTML page with the dynamically created list
+----------------------------------------------------+
| |
| +-------------------------+ |
| |V USA | |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
The goal is to use the array with your given data
to generate a list.
---
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.
---
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 FNListCreateArrayExampleSA() {
//
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>
<!-- ------------------------------------------------------>
<BUTTON
ONCLICK = ' document.forms.yourformname.yourlistname.options[
3 ].selected = true;'
>Your button caption</BUTTON>
<FORM
NAME = "yourformname"
>
<SELECT
NAME = "yourlistname"
>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname",
FNListCreateArrayExampleSA() );
</SCRIPT>
</SELECT>
</FORM>
</HTML>
<!-- ------------------------------------------------------>
--- cut here: end ----------------------------------------------------
Another example:
--- 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 = "";
//
document.write( "<FORM" );
document.write( " NAME =" + '"' + formnameS + '"' );
document.write( ">" );
//
document.write( "<SELECT" );
document.write( " NAME =" + '"' + listnameS + '"' );
document.write( ">" );
//
for ( I = minI; I <= maxI; I++ ) {
s = arraySA[ I ];
document.write( eval( 'document.forms.' + formnameS + '.' +
listnameS + '.options.options[' + I + '] = new Option( s, s );' ) );
}
//
document.write( "</SELECT>" );
//
document.write( "</FORM>" );
}
</SCRIPT>
<!-- ------------------------------------------------------>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA() {
//
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>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname",
FNListCreateArrayExampleSA() );
</SCRIPT>
<!-- ------------------------------------------------------>
<BUTTON
ONCLICK = ' document.forms.yourformname.yourlistname.options[
3 ].selected = true;'
>Your button caption</BUTTON>
<!-- ------------------------------------------------------>
</HTML>
<!-- ------------------------------------------------------>
--- cut here: end ----------------------------------------------------
---
---
Another example:
--- cut here: begin --------------------------------------------------
<!-- ------------------------------------------------------>
<HTML>
<BODY
ONLOAD = ' PROCListCreateArrayToListExampleLO();'
>
</BODY>
</HTML>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function PROCListCreateArrayToListExampleLO() {
// e.g. <HTML>
// e.g. <BODY
// e.g. ONLOAD = ' PROCListCreateArrayToListExampleLO();'
// e.g. >
// e.g. </BODY>
// e.g. </HTML>
var arraySA = FNListCreateArrayExampleSA();
var listS = FNListCreateArrayToListS( arraySA );
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: to: list: [kn, ri, tu, 07-09-2004
20:33:18] -->
function FNListCreateArrayToListS( arraySA, listnameS ) {
var minI = 0;
var I = minI;
var maxI = arraySA.length - 1;
//
var s = "";
//
document.write( "<SELECT" );
document.write( " NAME =" + " " + listnameS );
document.write( ">" );
//
for ( I = minI; I <= maxI; I++ ) {
s = arraySA[ I ];
document.write( "<OPTION>" + s + "</OPTION>" );
}
//
document.write( "</SELECT" );
return( listnameS );
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA() {
//
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>
<!-- ------------------------------------------------------>
--- 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
----------------------------------------------------------------------
