[Zope] script to dynamically update fields in SELECT

17 Jun 2001


      Hi,
  I made this script because I wanted to dynamically update the contents
of a SELECT field based on the choice in another SELECT. The contents are
updated from a <dtml-in> call, in my case from a SQL query.
  It took me a while to create, and I thought that someone else could use
it. Feel free to include it in a FAQ, guide, tips, etc.
  Comments about the script:
  * Create the arrays you want in Javascript to be populated by dtml-in.
    For some reason if I could not make it work if I used identation. keep
    it all on the same line.
  * I used a clone() function that I found in some other site to copy the
    wanted array in itemArray and create the SELECT object using 
    itemArray.
  * This script uses DHTML show & hide functions. So I doubt it will work
    in older browsers (actually I don't even know if it will work on
    anything other than IE. But I plan to test it at least on Konqueror).

Regards,
Konstantinos Margaritis

Script here
-----------------
<html>
<head>

<script language="JavaScript">
<!-- Script made by Konstantinos Margaritis -->
<!-- Uses functions in select script from 
     Jerome Caron (jerome.caron@globetrotter.net)
     from http://javascript.internet.com -->

<!-- Begin

function clone(obj) {
	var o = new obj.constructor();
	for (var i in obj)
		o[i] = obj[i];
	return o;
}

function show(object) {
    if (document.getElementById && document.getElementById(object) !=
null)
         node =
document.getElementById(object).style.visibility='visible';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'visible';
    else if (document.all)
        document.all[object].style.visibility = 'visible';
}

function hide(object) {
    if (document.getElementById && document.getElementById(object) !=
null)
         node = document.getElementById(object).style.visibility='hidden';
    else if (document.layers && document.layers[object] != null)
        document.layers[object].visibility = 'hidden';
    else if (document.all)
         document.all[object].style.visibility = 'hidden';
}

products = new Array(
<dtml-in listProducts>new Array(<dtml-var prod_key>,"<dtml-var
prod_name>")<dtml-if sequence-end><dtml-else>,</dtml-if></dtml-in>
);

games = new Array(
<dtml-in listGames>new Array(<dtml-var games_key>,"<dtml-var
games_title>")<dtml-if sequence-end><dtml-else>,</dtml-if></dtml-in>
);

function showTable(object, selectCtrl, tableWanted) {

    var ITEM_GAMES    = 1;
    var ITEM_PRODUCTS = 2;

    var i,j = 0;
    if (tableWanted) {
        // empty existing items
        for (i = selectCtrl.options.length; i >= 0; i--) {
            selectCtrl.options[i] = null; 
        }
        if (tableWanted == ITEM_GAMES) {
            itemArray = clone(games);
        }
        else if (tableWanted == ITEM_PRODUCTS) {
            itemArray = clone(products);
        }

        for (i = 0; i < itemArray.length; i++) {
            selectCtrl.options[j] = new Option(itemArray[i][1]);
            if (itemArray[i][0] != null) {
                selectCtrl.options[j].value = itemArray[i][0]; 
            }
            j++;
        }

        show(object);
    }
    else
        hide(object);
}

//--></script>

<style type="text/css"><!--
.myStyle {
    position: absolute;
    visibility: hidden;
}
//--></style>
</head>
<body>

<form>
<select name="choice" onChange="showTable('table', this.form.tableKey,
this.selectedIndex);">
<option value=-1>None</option>
<option value=1>Games</option>
<option value=2>Products</option>
</select>

<div id="table" class="myStyle">
<select name="tableKey">
</select>
</div>

</form>
</body>
</html>
-----------------