Christopher
Stoll

Reusable XHTML Select Boxes

I have a small problem with many of the web-based, database-driven apps that I make for my company. The problem is that the users want to have a drop-down box with all the possible user names (or person’s names) when they need to select a persons’ name, which is reasonable until there are multiple selections like this on one page. Currently there are around 1000 users at my company, and we have some pages with up 40 select boxes for user names. That’s over 40,000 lines of code just to display the user select boxes, which means the page size would be well in excess of 4 megabytes.

So, I thought of a way to reduce the amount of information that has to be transferred by only transferring it once. I created a JavaScript function that contained all of the data once, then when a user clicked in a box to fill out the user name the JavaScript would change the are to a drop-down box. Here is the JavaScript function, it includes some ColdFusion code to generate the select options.

<script type="text/javascript">
    function indexInSelect(theSelectID, theValue) {
        var arLength=document.getElementById(theSelectID).options.length;
        theValue=theValue.toUpperCase();
        for(var i=0; i<arLength; i++) {
            if (document.getElementById(elName).options[i].value.toUpperCase() == theValue){
                return i;
            }
        }
        return -1;
    }

    function showUserList(sendbackto, selectedvalue, sendvalueto) {
        elName='UserListSelect-'+sendbackto;
        document.getElementById(sendbackto).innerHTML=
            '<select id="'
            + elName
            + '" name="'
            + elName
            + '" onchange="selectUser(\''
            + sendvalueto
            + '\', this.value);">'
            + <cfoutput>
                <cfloop query="qListUsernames">
                    '<option value="#qListUsernames.NTname#">
                        <cfif len(qListUsernames.Name) ge 25>
                            #left(qListUsernames.Name, 22)#...
                        <cfelse>#qListUsernames.Name#
                        </cfif>
                    </option>'+
                </cfloop>
            </cfoutput>
        '</select>';
        selIndex=indexInSelect(elName, selectedvalue);
        if(selIndex==-1) {
            thenewposition=document.getElementById(elName).options.length;
            document.getElementById(elName).options[thenewposition]=
                new Option(selectedvalue);
            document.getElementById(elName).selectedIndex=thenewposition;
        } else {
            document.getElementById(elName).selectedIndex=selIndex;
        }
    }

    function selectUser(sendto, sendvalue) {
        document.getElementById(sendto).value=sendvalue;
    }
</script>

And, to implement this in the page I use the following code.

<input type="hidden" id="AuditorNameStore" value="<cfoutput>#data.AuditorName#</cfoutput>" />
<div id="AuditorNameDiv">
    <input
        name="AuditorName"
        maxlength="32"
        size="32"
        value="<cfoutput>#data.AuditorName#</cfoutput>"
        onfocus="showUserList('AuditorNameDiv', '<cfoutput>#data.AuditorName#</cfoutput>', 'AuditorNameStore')"
    />
</div>
Published: 2008-01-14
BloggerJavaScriptColdFusionCode