Entry
JavaScript: How create 2 connected lists dynamically+array+include+copy+select? [one to many]
Sep 25th, 2004 10:05
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 25 September 2004 - 05:26 am ------------------
JavaScript: How create 2 connected lists
dynamically+array+include+copy+select? [one to many]
---
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 one array
(e.g. as 'yourarray1.js')
in the same directory.
This is your main data file.
3. -Save data2 file with your many array
(e.g. as 'yourarray21.js')
in the same directory.
This is your connected file.
4. -Save data3 file with your array
(e.g. as 'yourarray22.js')
in the same directory.
This is your key file, giving the
rows of array1 corresponding to
that row in array2.
5. -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>
<!-- ------------------------------------------------------>
<HEADER>
<!-- ------------------------------------------------------>
<SCRIPT
LANGUAGE="JavaScript"
SRC="yourarray1.js"
>
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT
LANGUAGE="JavaScript"
SRC="yourarray21.js"
>
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT
LANGUAGE="JavaScript"
SRC="yourarray22.js"
>
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!--
<!-- library: text: copy: list: select: option [kn, ri, tu, 14-09-
2004 19:10:34] -->
function FNTextCopyListSelectValueS( form1, list1 ) {
//
var temp1 = null;
var s = "";
//
// you must use a 'text' field
// (a 'hidden' text field will not show anything)
//
temp1 = form1.text1.createTextRange();
temp1.execCommand( 'Paste' );
s = form1.text1.value;
return( s );
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!--
<!-- library: text: copy: list: select: option [kn, ri, tu, 14-09-
2004 19:10:34] -->
function PROCTextCopyListSelectValue( form1, list1, text1 ) {
var s = ""
var I = 0
var minI = 0
var maxI = list1.length - 1;
//
var foundI = -1; // some sentinel value
//
s = FNTextCopyListSelectValueS( form1, list1 );
I = minI - 1;
while ( I < maxI ) {
I = I + 1;
if ( s == ( list1.options[ I ].text ) ) {
foundI = I;
}
}
//
if ( foundI != -1 ) {
list1.options[ foundI ].selected = true;
}
//
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!--
<!-- library: text: copy: list: select: option -->
function PROCTextCopyComponentValue( form1, s ) {
var temp1 = null;
var hidden1 = null;
if ( typeof( form1.hidden1 ) == "undefined" ) {
form1.innerHTML += '<INPUT TYPE="hidden" NAME="hidden1" VALUE="' +
s + '">';
}
form1.hidden1.value = s;
temp1 = form1.hidden1.createTextRange();
temp1.select();
temp1.execCommand( 'copy' );
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<!-- this procedure be located above (else you get empty list) -->
<SCRIPT LANGUAGE = "JavaScript">
function PROCTextCreateSelectOptionsConnectNew( formnameS,
listnameS, rowgivenI, array1SA, array21SA, array22SA ) {
var I = 0;
var minI = 0;
var maxI = array22SA.length - 1;
//
var rowI = 0;
//
var s = "";
//
var minJ = 0;
var J = minJ - 1;
//
for ( I = minI; I <= maxI; I++ ) {
rowI = array22SA[ I ];
if ( ( rowI - 1 ) == rowgivenI ) {
s = array21SA[ I ];
J = J + 1;
eval( 'document.forms.' + formnameS + '.' + listnameS
+ '.options.options[' + J + '] = new Option( "' + s + '", "' + s
+ '");' );
}
}
}
</SCRIPT>
<!-- ------------------------------------------------------>
<!-- this procedure be located above (else you get empty list) -->
<SCRIPT LANGUAGE = "JavaScript">
function PROCTextCreateSelectOptionsMainNew( 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>
<!-- ------------------------------------------------------>
</HEADER>
<!-- ------------------------------------------------------>
<BODY
ONLOAD=' PROCTextCopyListSelectValue( document.forms.yourformname1,
document.forms.yourformname1.yourlistname1,
document.forms.yourformname1.text1 );'
>
<!-- ------------------------------------------------------>
<FORM
NAME = "yourformname1"
>
<!-- ------------------------------------------------------>
<INPUT
TYPE="text"
NAME="text1"
>
<!-- ------------------------------------------------------>
<BR>
</BR>
<BR>
</BR>
<!-- ------------------------------------------------------>
<SELECT
NAME = "yourlistname1"
ONCHANGE = '
document.forms.yourformname2.yourlistname2.length = 0;
PROCTextCreateSelectOptionsConnectNew
( "yourformname2", "yourlistname2",
document.forms.yourformname1.yourlistname1.selectedIndex,
FNListCreateArrayExample1SA(), FNListCreateArrayExample21SA(),
FNListCreateArrayExample22SA() );
'
>
<!-- ------------------------------------------------------>
<SCRIPT>
PROCTextCreateSelectOptionsMainNew
( "yourformname1", "yourlistname1", FNListCreateArrayExample1SA() );
</SCRIPT>
<!-- ------------------------------------------------------>
</SELECT>
<!-- ------------------------------------------------------>
<BUTTON
NAME="button1"
ONCLICK=' PROCTextCopyComponentValue(
document.forms.yourformname1,
document.forms.yourformname1.yourlistname1.options[
document.forms.yourformname1.yourlistname1.options.selectedIndex
].value );'
>
Copy
</BUTTON>
<!---------------------------------------->
</FORM>
<!-- ------------------------------------------------------>
<FORM
NAME = "yourformname2"
>
<!-- ------------------------------------------------------>
<SELECT
NAME = "yourlistname2"
>
<!-- ------------------------------------------------------>
<SCRIPT>
PROCTextCreateSelectOptionsMainNew
( "yourformname2", "yourlistname2", FNListCreateArrayExample21SA() );
</SCRIPT>
<!-- ------------------------------------------------------>
</SELECT>
<!-- ------------------------------------------------------>
<BUTTON
NAME="button2"
ONCLICK=' PROCTextCopyComponentValue( document.forms.yourformname2,
document.forms.yourformname2.yourlistname2.options[
document.forms.yourformname2.yourlistname2.options.selectedIndex
].value );'
>
Copy
</BUTTON>
<!---------------------------------------->
</FORM>
<!-- ------------------------------------------------------>
</BODY>
<!-- ------------------------------------------------------>
</HTML>
<!-- ------------------------------------------------------>
--- cut here: end ----------------------------------------------------
2. -Save data1 file with your one array
(e.g. as 'yourarray1.js')
in the same directory.
This is your main data file.
--- cut here: begin --------------------------------------------------
<!-- 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 );
}
--- cut here: end ----------------------------------------------------
3. -Save data2 file with your many array
(e.g. as 'yourarray21.js')
in the same directory.
This is your connected file.
--- cut here: begin --------------------------------------------------
<!-- library: list: create: array: example -->
function FNListCreateArrayExample21SA() {
//
var arraySA = new Array (
[ "German" ],
[ "Dutch" ],
[ "French" ],
[ "German" ],
[ "Bulgarian" ],
[ "Czech" ],
[ "Danish" ],
[ "Arabic" ],
[ "Finnish" ],
[ "French" ],
[ "German" ],
[ "Greek" ],
[ "Hungarian" ],
[ "Hindi" ],
[ "English" ],
[ "Hebrew" ],
[ "Italian" ],
[ "Dutch" ],
[ "French" ],
[ "German" ],
[ "Dutch" ],
[ "Norwegian" ],
[ "Polish" ],
[ "Portuguese" ],
[ "Russian" ],
[ "Afrikaans" ],
[ "English" ],
[ "Spanish" ],
[ "Swedish" ],
[ "German" ],
[ "Turkish" ],
[ "English" ],
[ "English" ]
);
//
return( arraySA );
}
--- cut here: end ----------------------------------------------------
4. -Save data3 file with your array
(e.g. as 'yourarray22.js')
in the same directory.
This is your key file, giving the
rows of array1 corresponding to
that row in array2.
--- cut here: begin --------------------------------------------------
<!-- library: list: create: array: example -->
function FNListCreateArrayExample22SA() {
//
var arraySA = new Array (
[ " 1" ],
[ " 2" ],
[ " 2" ],
[ " 2" ],
[ " 3" ],
[ " 4" ],
[ " 5" ],
[ " 6" ],
[ " 7" ],
[ " 8" ],
[ " 9" ],
[ "10" ],
[ "11" ],
[ "12" ],
[ "13" ],
[ "14" ],
[ "15" ],
[ "16" ],
[ "16" ],
[ "16" ],
[ "17" ],
[ "18" ],
[ "19" ],
[ "20" ],
[ "21" ],
[ "22" ],
[ "22" ],
[ "23" ],
[ "24" ],
[ "25" ],
[ "26" ],
[ "27" ],
[ "28" ]
);
//
return( arraySA );
}
--- cut here: end ----------------------------------------------------
5. -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 values 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.
If you copy any value of the first list
to the clipboard (e.g. USA), then automatically
this value will be chosen in the first list
when you load the page.
(this can come handy, if your first list is
very long (e.g. 1000 product numbers), you can then copy
the searched value (e.g. one particular product number
(like A1234B) to the clipboard first, then loading the
page, and automatically that value is selected, so saving
your time)
+----------------------------------------------------+
| |
| +-------------------------+ |
| | here clipboard content | |
| +-------------------------+ |
| |
| |
| |
| |
| +-------------------------+ |
| |V USA | [COPY] |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V ENGLISH | [COPY] |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
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.
+----------------------------------------------------+
| |
| +-------------------------+ |
| | here clipboard content | |
| +-------------------------+ |
| |
| |
| |
| +-------------------------+ |
| |V FRANCE | [COPY] |
| +-------------------------+ |
| |
| +-------------------------+ |
| |V FRENCH | [COPY] |
| +-------------------------+ |
| |
| |
| |
| |
| |
| |
| |
| |
+----------------------------------------------------+
---
---
Note:
You can also add an extra pointer column to the main column,
for symmetry purposes. The structure of all columns is then
equivalent.
---
---
The goal is to use the arrays with your given data
to generate 2 lists.
---
So that arrays are the only position in your code where you possibly
have
to change something.
---
You can also reuse the arrays 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
----------------------------------------------------------------------
