Entry
JavaScript: How create 2 connected lists dynamically+array+include+copy clipboard? [one to many]
Sep 25th, 2004 10:03
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 25 September 2004 - 04:13 am ------------------
JavaScript: How create 2 connected lists
dynamically+array+include+copy clipboard? [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 -->
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
>
<!-- ------------------------------------------------------>
<FORM
NAME = "yourformname1"
>
<!-- ------------------------------------------------------>
<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.
+----------------------------------------------------+
| |
| +-------------------------+ |
| |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.
+----------------------------------------------------+
| |
| +-------------------------+ |
| |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
----------------------------------------------------------------------
