2 Replies Latest reply on Feb 26, 2007 12:39 PM by Dan Bracuk

    Related selects in JS

      I'm trying to build an email list for parents to receive school- and grade-specific emails. I'm building related selects to choose the school, and then the grades at that school (which vary based on elementary/middle/high). I've grabbed working JS code and changed it, and of course it doesn't work for me. :) It displays the schools fine, but doesn't change the grades box. When I view the source, it is creating the appropriate arrays, but they're not being implemented.

      I'm attaching the code with the handy "attach code" button. :) I can provide the source data as well if that would help.

      And next, of course, I'll need to pass these values to another page to use. If anyone has insight on *that*, I'd appreciate being pointed in a good direction.

      (I feel like such a moron)
        • 1. Re: Related selects in JS
          c_wigginton Level 1
          You might want to consider AJAX, I've got a custom tag for this.

          • 2. Re: Related selects in JS
            Dan Bracuk Level 5
            I only had to do this once, and it works. Here it is

            <cfquery name="Etiology" datasource="burns">
            select EtiologyID, Etiology
            from burns_Etiology
            where show = <cfqueryparam cfsqltype="cf_sql_char" value="Y">

            <cfquery name="EtiologyDetail" datasource="burns">
            select EtiologyID, EtiologyDetailID, detail
            from burns_EtiologyDetail
            where show = <cfqueryparam cfsqltype="cf_sql_char" value="Y">

            // arrays to make selectcontrol script work
            idArray = ListToArray(ValueList(EtiologyDetail.EtiologyDetailID));
            compareArray = ListToArray(ValueList(EtiologyDetail.EtiologyID));
            descriptionArray = ListToArray(ValueList(EtiologyDetail.detail));

            another query for the current value, if applicable

            <script language="JavaScript">
            function selectChange(selectedValue)
            // changes the options for etilogy detail based on selection of etiology
            var #toScript(idArray, "theIdArray")#;
            var #toScript(compareArray, "theCompareArray")#;
            var #toScript(descriptionArray, "theDescriptionArray")#;
            var i = 0;
            var j = 0;
            var len = theIdArray.length;

            // clear the detail select control
            document.forms['dataForm'].EtiologyDetail.options.length = 0;

            for ( i = 0; i < len; i++)
            if (theCompareArray == selectedValue)
            document.forms['dataForm'].EtiologyDetail.options[j] = new Option(theDescriptionArray
            ,theIdArray );
            } // end if
            } // end loop

            return true;
            } // end function

            Function gets called here
            <td><cfselect query="Etiology" name="Etiology" onChange="selectChange(this.value);"
            value="Etiologyid" display="Etiology" selected="#selectedEtiology#" />

            <td colspan="3">
            <cfif existingrecord>
            <cfselect query="etdetail" value="EtiologyDetailID" display="detail"
            name="EtiologyDetail" selected="#selectedEtiologyDetail#" />
            <select name="EtiologyDetail" >
            <option value="1">Not Updated</option>