faqts : Computers : Programming : Languages : JavaScript : Forms : SELECT

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

1 of 4 people (25%) answered Yes
Recently 1 of 4 people (25%) answered Yes

Entry

JavaScript: List: Create: Dynamically: Select: How connect 3 lists dynamically created via 3 arrays?

Sep 25th, 2004 09:28
Knud van Eeden,


----------------------------------------------------------------------
--- Knud van Eeden --- 08 September 2004 - 05:49 am ------------------
JavaScript: List: Create: Dynamically: Select: How connect 3 lists 
dynamically created via 3 arrays?
---
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 3 newly created lists where the chosen option in
     one list has selected the corresponding value in the other list
     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               |                       |
     |  +-------------------------+                       |
     |                                                    |
     |  +-------------------------+                       |
     |  |V      ENGLISH           |                       |
     |  +-------------------------+                       |
     |                                                    |
     |  +-------------------------+                       |
     |  |V      HOW DO YOU DO?    |                       |
     |  +-------------------------+                       |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     +----------------------------------------------------+
---
---
     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                |                       |
     |  +-------------------------+                       |
     |                                                    |
     |  +-------------------------+                       |
     |  |V  FRENCH                |                       |
     |  +-------------------------+                       |
     |                                                    |
     |  +-------------------------+                       |
     |  |V  COMMENT ALLEZ-VOUS    |                       |
     |  +-------------------------+                       |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     |                                                    |
     +----------------------------------------------------+
---
---
The goal is to use the 3 arrays with your given data
to generate 3 lists.
---
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.
--- cut here: begin --------------------------------------------------
<!-- ------------------------------------------------------>
<HTML>
<!-- ------------------------------------------------------>
 <SCRIPT LANGUAGE = "JavaScript">
 <!-- library: list: create: array: example -->
 function PROCListCreateListFromArray( arraySA ) {
  var minI = 0;
  var I = minI;
  var maxI = arraySA.length - 1;
  //
  var s = "";
  //
  for ( I = minI; I <= maxI; I++ ) {
   s = arraySA[ I ];
   document.write( "<OPTION>" + s + "</OPTION>" );
  }
 }
 </SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
function PROCListUpdateFormArray1D( searchS, list, column1SA, 
column2SA) {
 var minI = 0;
 var I = minI;
 var maxI = column1SA.length - 1;
 //
 var s1 = "";
 var s2 = "";
 var s3 = ""
 //
 // search the given string in the first column of the 2 column table
 //
 for ( I = minI; I <= maxI; I++ ) {
  s1 = column1SA[ I ];
  s2 = column2SA[ I ];
  if ( searchS == s1 ) { // if found in the first column, get the 
corresponding second column value
   s3 = s2;
  }
 }
 //
 // search the found second column string in the given list
 //
 for ( I = minI; I <= maxI; I++ ) {
  if ( list.options[ I ] != null ) {
   s1 = list.options[ I ].text;
   if ( s3 == s1 ) { // if found in the list, select the corresponding 
element of the list
    list.options[ I ].selected = true;
   }
  }
 }
}
// -->
</SCRIPT>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA1() {
  //
  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 LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA2() {
 //
 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>
<!-- ------------------------------------------------------>
<SCRIPT LANGUAGE = "JavaScript">
<!-- library: list: create: array: example -->
function FNListCreateArrayExampleSA3() {
 //
 var arraySA = new Array (
  [ "Sind sie end benuetzer oder Haendler?" ],
  [ "Bent u eindgebruiker of distributeur?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Er du endbrukere eller distributoer?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Etes-vous client final ou distributeur?" ],
  [ "Sind sie end benuetzer oder Haendler?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Lei e cliente finale o distributore?" ],
  [ "Etes-vous client final ou distributeur?" ],
  [ "Bent u eindgebruiker of distributeur?" ],
  [ "Er du endbrukere eller distributoer?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Ben uw eindgebruiker of distributeure?" ],
  [ "Esta usted utente final o distribudor?" ],
  [ "Aer du endbrukare eller distributoer?" ],
  [ "Sind sie end benuetzer oder Haendler?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ],
  [ "Are you end user or distributor?" ]
 );
 //
 return( arraySA );
}
</SCRIPT>
<!-- ------------------------------------------------------>
<BODY
>
<SCRIPT>
  var array1SA = FNListCreateArrayExampleSA1();
  var array2SA = FNListCreateArrayExampleSA2();
  var array3SA = FNListCreateArrayExampleSA3();
</SCRIPT>
<FORM
  NAME = "form1"
>
<SELECT
  NAME = "list1"
  ONCHANGE = '
   PROCListUpdateFormArray1D( document.forms.form1.list1.options[ 
list1.selectedIndex ].text, document.forms.form1.list2, array1SA, 
array2SA );
   PROCListUpdateFormArray1D( document.forms.form1.list2.options[ 
list2.selectedIndex ].text, document.forms.form1.list3, array2SA, 
array3SA );
  '
>
 <SCRIPT>
   PROCListCreateListFromArray( array1SA );
 </SCRIPT>
</SELECT>
<BR/>
<BR/>
<SELECT
  NAME = "list2"
  ONCHANGE = '
   PROCListUpdateFormArray1D( document.forms.form1.list2.options[ 
list2.selectedIndex ].text, document.forms.form1.list3, array2SA, 
array3SA );
  '
>
 <SCRIPT>
   PROCListCreateListFromArray( array2SA );
 </SCRIPT>
</SELECT>
<BR/>
<BR/>
<SELECT
  NAME = "list3"
>
 <SCRIPT>
   PROCListCreateListFromArray( array3SA );
 </SCRIPT>
</SELECT>
</FORM>
</BODY>
</HTML>
<!-- ------------------------------------------------------>
---
---
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
----------------------------------------------------------------------