Entry
JavaScript: List: Create: Dynamically: How to dynamically create <SELECT><OPTION> list using a loop?
Sep 25th, 2004 09:35
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 08 September 2004 - 08:32 pm ------------------
JavaScript: List: Create: Dynamically: How to dynamically create
<SELECT><OPTION> list using a loop?
---
Method 1: Using JavaScript 'document.write'
--- cut here: begin --------------------------------------------------
<HTML>
<!-- this procedure should be located before your <SELECT> station
(else you will get an empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsDocumentWrite() {
var I = 0;
var minI = 0;
var maxI = 5 - 1;
for ( I = minI; I <= maxI; I++ ) {
document.write( "<OPTION>test</OPTION>" );
}
}
</SCRIPT>
<SELECT
NAME ="yourlist"
>
<SCRIPT>
PROCTextCreateSelectOptionsDocumentWrite();
</SCRIPT>
</SELECT>
</HTML>
--- cut here: end ----------------------------------------------------
---
---
Method 2: Using JavaScript 'new Option'
--- cut here: begin --------------------------------------------------
<HTML>
<!-- this procedure should be located before your <SELECT> statement
(else you will get an empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsNew() {
var I = 0;
var minI = 0;
var maxI = 5 - 1;
document.forms.yourform.yourlist.options.length = 0; // Clear the
popup
for ( I = minI; I <= maxI; I++ ) {
document.forms.yourform.yourlist.options.options[ I ] = new Option
( "test", "test" );
}
}
</SCRIPT>
<FORM
NAME = "yourform"
>
<SELECT
NAME ="yourlist"
>
<SCRIPT>
PROCTextCreateSelectOptionsNew();
</SCRIPT>
</SELECT>
</FORM>
</HTML>
--- cut here: end ----------------------------------------------------
---
---
Method 3: Using 'new Option' and 'document.write': select name is a
variable, form name is a constant
--- cut here: begin --------------------------------------------------
<HTML>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsNew( listnameS ) {
var I = 0;
var minI = 0;
var maxI = 5 - 1;
//
document.write( "<SELECT" );
document.write( " NAME =" + '"' + listnameS + '"' );
document.write( ">" );
//
for ( I = minI; I <= maxI; I++ ) {
document.write( eval( 'document.forms.yourform.' + listnameS
+ '.options.options[' + I + '] = new Option( "test", "test" );' ) );
}
//
document.write( "</SELECT>" );
}
</SCRIPT>
<FORM
NAME = "yourform"
>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourlistname" );
</SCRIPT>
</FORM>
</HTML>
--- cut here: end ----------------------------------------------------
---
---
Method 4: Using 'new Option' and 'document.write': select name is a
variable, form name is a variable
--- cut here: begin --------------------------------------------------
<HTML>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsNew( formnameS, listnameS ) {
var I = 0;
var minI = 0;
var maxI = 5 - 1;
//
//
document.write( "<FORM" );
document.write( " NAME =" + '"' + formnameS + '"' );
document.write( ">" );
//
document.write( "<SELECT" );
document.write( " NAME =" + '"' + listnameS + '"' );
document.write( ">" );
//
for ( I = minI; I <= maxI; I++ ) {
document.write( eval( 'document.forms.' + formnameS + '.' +
listnameS + '.options.options[' + I + '] = new Option
( "test", "test" );' ) );
}
//
document.write( "</SELECT>" );
//
document.write( "</FORM>" );
}
</SCRIPT>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname" );
</SCRIPT>
</HTML>
--- cut here: end ----------------------------------------------------
---
---
For example: you create your <SELECT><OPTION> list completely
dynamically, and pass the name of the form and the select/option list
via parameters
--- cut here: begin --------------------------------------------------
<HTML>
<!-- this procedure should be located above (else you will get an
empty list) -->
<SCRIPT>
function PROCTextCreateSelectOptionsNew( formnameS, listnameS ) {
var I = 0;
var minI = 0;
var maxI = 5 - 1;
//
//
document.write( "<FORM" );
document.write( " NAME =" + '"' + formnameS + '"' );
document.write( ">" );
//
document.write( "<SELECT" );
document.write( " NAME =" + '"' + listnameS + '"' );
document.write( ">" );
//
for ( I = minI; I <= maxI; I++ ) {
document.write( eval( 'document.forms.' + formnameS + '.' +
listnameS + '.options.options[' + I + '] = new Option( "test" +
I, "test" + I );' ) );
}
//
document.write( "</SELECT>" );
//
document.write( "</FORM>" );
}
</SCRIPT>
<SCRIPT>
PROCTextCreateSelectOptionsNew( "yourformname", "yourlistname" );
</SCRIPT>
<BUTTON
ONCLICK = ' document.forms.yourformname.yourlistname.options[
3 ].selected = true;'
>Your button caption</BUTTON>
</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
----------------------------------------------------------------------
