[mossman65]

Hi All,

I'm looking for a way to do a year make model dependent drop down. I have found a few examples using CF and JQuery and a couple using Ajax and CF. I haven't had any luck with either.

I have a very simple dependent drop down that i built, but its lacking in user functionality. As long as you drill down in order you're fine, but if you change one of the previous selections it reloads and breaks the search: http://www.griffinra...m/exact_fit.cfm

Here is a tutorial i tried using JS and CF but it doesn't populate the child list when the parent is selected. It look like there should be code for the other two drop downs but in this example they didn't show any...

   <cfquery name="YMM" datasource="MyDS">
        SELECT Distinct Make, Model, YearRange 
        FROM ExactFitRadiators
        GROUP BY Make, Model, YearRange
        ORDER BY Make, Model, YearRange
    </cfquery>
    


    <script language="Javascript">
        //create the initial array to hold the different records.
        var aryLocation = new Array();
        <cfset Variables.JSLoop = 0>
        <cfoutput>
            <cfloop query="YMM">
                aryLocation[#Variables.JSLoop#] = new Array("#YMM.Make#", "<cfif #YMM.Model# EQ "">Select YearRange<cfelse>#YMM.Model#</cfif>", "#YMM.YearRange#");
                <cfset Variables.JSLoop = Variables.JSLoop + 1>
            </cfloop>
        </cfoutput>
        
        function tsrUpdSelect(frstSel, scndSel, thrdSel, thisSel) {
            //local variables
            var i; var chkCty = "";
        
            //see if we just changed the first select box.
            if(thisSel.name == frstSel.name) {
                //set the length of the other selects to zero to empty them
                scndSel.options.length = 0;
                thrdSel.options.length = 0;
        
                //set the first option for each.
                scndSel.options[scndSel.length] = new Option("Choose Model", "");
                thrdSel.options[thrdSel.length] = new Option("Choose YearRange", "");
        
                //Now loop through and set the second option list.
                //If a Model was chosen. There is also code to prevent duplicate cities. This could happen if a YearRange had multiple addresses.
                if(thisSel.options[thisSel.selectedIndex].value != "") {
                    for (i = 0; i < aryLocation.length; i++) {
                        if(aryLocation[i][0] == thisSel.options[thisSel.selectedIndex].value && chkCty.lastIndexOf(aryLocation[i][1]) == -1) {
                            scndSel.options[scndSel.length] = new Option(aryLocation[i][1], aryLocation[i][1]); chkCty = chkCty + "," + aryLocation[i][1];
                        }
                    }
                }
            }
        
            //see if we just changed the second select box.
            if(thisSel.name == scndSel.name) {
                //set the length of the third select to zero.
                thrdSel.options.length = 0;
                //set the first option.
                thrdSel.options[thrdSel.length] = new Option("Choose YearRange", "");
                //set the rest of the values if a YearRange was chosen.
                for(i=0; i < aryLocation.length; i++) {
                    if(aryLocation[i][0] == frstSel.options[frstSel.selectedIndex].value && aryLocation[i][1] == scndSel.options[scndSel.selectedIndex].value) { thrdSel.options[thrdSel.length] = new Option(aryLocation[i][2], aryLocation[i][2])
                    }
                }
            }
        }
    </script>

<cfset MakeList = "">
<select name="myMake" onchange="tsrUpdSelect(this, formName.myModel, formName.myYearRange, this);">
    <option value="" selected>Choose Make</option>
    <cfloop query="YMM">
        <cfif not listFindNoCase(MakeList, YMM.Make, ",")>
            <option value="#YMM.Make#"> #YMM.Make# </option>
            <cfset MakeList = listAppend(MakeList, YMM.Make, ",")>
        </cfif>
    </cfloop>
</select>
&nbsp;
<select name="myModel" onchange="tsrUpdSelect(formName.myMake, this, formName.myYearRange, this);">
    <option value="">Choose Model</option>


</select>
&nbsp;
<select name="myYearRange">
    <option value="">Choose YearRange</option>

</select>

I know there are better ways to do this, could someone please point me in the right direction for a good tutorial of how this is done?

I'm using CF8 and SQL. You can see the page here: http://www.griffinrad.com/crazy.cfm

Thank you very much!

[Craig328]

Hey mossman65, welcome back. Sorry for the late response. Didn't see this one come in.

I ran your crazy.cfm page and you're on the right track for what you're trying to do. The reason that page isn't working is because you have a call to a Javascript function that looks like this:

<select name="myMake" onchange="tsrUpdSelect(this, formName.myModel, formName.myYearRange, this);">

...and when you make a selection it throws a JS error saying formName is not defined.

That's the second parameter you're trying to pass in your function call and you don't have a form per se on that page. I'm guessing you took that from an example you were trying to copy but for that to work you'll need to have the select element inside a form and that form will require a name which you'll pass in place of "formName" when you go to use it.

While I said you were on the right track I'd recommend you do try solving this one via jQuery. The reason being is that your Javascript array is upwards of 1700 items long and that's a lot of text to push to a browser that you can solve a little better with an Ajax (jQuery) solution.

That said, if you're using CF8 or higher you can use the data binding feature of CFSELECT. You might find that easier and Ben Forta has a nifty example for how that's used here. While that may work for you, I'd really recommend trying to figure it out via jQuery. That tech can solve lots of problems for you whereas the implementation of Ajax functionality native to CF has always seemed kind of stifling.

As per usual with CF, there's more than one way to skin the cat. Good luck!

[mossman65]

Craig328, on 05 December 2012 - 09:07 PM, said:

Hey mossman65, welcome back. Sorry for the late response. Didn't see this one come in.

I ran your crazy.cfm page and you're on the right track for what you're trying to do. The reason that page isn't working is because you have a call to a Javascript function that looks like this:

<select name="myMake" onchange="tsrUpdSelect(this, formName.myModel, formName.myYearRange, this);">

...and when you make a selection it throws a JS error saying formName is not defined.

That's the second parameter you're trying to pass in your function call and you don't have a form per se on that page. I'm guessing you took that from an example you were trying to copy but for that to work you'll need to have the select element inside a form and that form will require a name which you'll pass in place of "formName" when you go to use it.

While I said you were on the right track I'd recommend you do try solving this one via jQuery. The reason being is that your Javascript array is upwards of 1700 items long and that's a lot of text to push to a browser that you can solve a little better with an Ajax (jQuery) solution.

That said, if you're using CF8 or higher you can use the data binding feature of CFSELECT. You might find that easier and Ben Forta has a nifty example for how that's used here. While that may work for you, I'd really recommend trying to figure it out via jQuery. That tech can solve lots of problems for you whereas the implementation of Ajax functionality native to CF has always seemed kind of stifling.

As per usual with CF, there's more than one way to skin the cat. Good luck!

Thank you Craig! I will try this first thing tomorrow.