Help! jquery using returned JSON data to write html

JavaScript
1

Hi All,

I’m building a form select box that’s related to a prior select box. When a user selects, a brand from a drop down select box, the second drop down select box then populates with related data.

The json data is returned from a database query and looks like this:
{“COLUMNS”:[“MODEL”],“DATA”:[[“1000 S, SF, ST”],[“1000 S, SF, ST”],[“1000 S, SF, ST”],[“1000 S, SF, ST”],[“1000 S, SF, ST”]]}

Here’s where I am. When you choose an option in the first drop down, the second drop down clears and the correct data is retrieved. I just can’t get the data to populate the second drop down with the data.

See: http://199.73.57.203/selectsnew.cfm

<script>
$(document).ready(function() {

//first, detect when initial DropDown changes
$(“#make”).change(function() {
//get what they selected
var selected = $(“option:selected”,this).val();

//no matter what, clear the other DD
$(“#models”).children().remove().end().append(“<option value=\”\“>Select a Stinkin Model</option>”);

//now load in new options if I picked a make
if(selected == “”) return;

$.getJSON(“getfitmentdata09.cfc?method=getmotomodels&returnformat=json”,{“make”:selected}, function(res,code) {
var newoptions = “”;
for(var i=0; i<res.length; i++) {
newoptions += “<option value=\”" + res[i].make + “\”>" + res[i].make + “</option>”;
}
$(“#models”).children().end().append(newoptions);
});
});

})
</script>

<form>
<select name=“make” id=“make”>
<option value=“” selected>Please Select… </option>
<option value=“APRILIA”>APRILIA </option>
<option value=“BENELLI”>BENELLI </option>
<option value=“BIMOTA”>BIMOTA </option>
</select>

<label for=“models”>Models</label>
<select name=“models” id=“models”>
<option value=“”>Select a Model</option>
</select>

</form>

2

Currently your pointing your loop to a non-existent array key, see the below example which is going through each item returned in your DATA key.

var models = res.DATA;

for (var i = 0, max = models.length; i < max; i++) {
    newoptions +=  '<option value="' + models[i][0] + '">' + models[i][0] + '</option>';
}
3

Thanks Chris,
Last night I figured out the same thing regarding the array. I was adopting this from a different example using an array.

I got the above to work, now I’m wondering if I can extend this out with a third drop down. As in “make > models > years”

Ive got the second drop down related to the first, but can’t get my listener function to do anything with the second drop down. I’d like my second listener function to look for a selection in the second drop down, then change the third drop down, by adding a new option at this point. If I can get that, I’ll make a call for more data and populate the third drop down.

This is where I am: (easier to read at http://199.73.57.203/selectsnew2.cfm)

<html>

&lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function () {
            //first, detect when initial DropDown changes
            $("#make").change(function () {
                //get what they selected
                var selected = $("option:selected", this).val();
                //no matter what, clear the other DD
                $("#models").children().remove().end().append("&lt;option value=\\"\\"&gt;Select a Stinkin Model&lt;/option&gt;");
                //now load in new options if I picked a brand
                if (selected == "") return;
                $.getJSON("getfitmentdata09.cfc?method=getmotomodels&returnformat=json", {
                    "make": selected
                }, function (res, code) {
                    var newoptionsyears = "";
                    for (var i = 0; i &lt; res.DATA.length; i++) {
                        newoptionsyears += "&lt;option value=\\"" + res.DATA[i] + "\\"&gt;" + res.DATA[i] + "&lt;/option&gt;";
                    }
                    $("#models").children().end().append(newoptionsyears);
                });
            });
            //detect when second DropDown changes
            $("#models").change(function () {
                //get what they selected
                var selectedmodels = $("option:selectedmodels", this).val();
                //no matter what, clear the other DD
                $("#years").children().remove().end().append("&lt;option value=\\"\\"&gt;Select a Stinkin Year&lt;/option&gt;");
            });
            //now load in new options if I picked a brand
            if (selected == "") return;
            $.getJSON("getfitmentdata09.cfc?method=getyears&returnformat=json", {
                "make": selected,
                "models": selectedmodels
            }, function (res, code) {
                var newoptions = "";
                for (var i = 0; i &lt; res.DATA.length; i++) {
                    newoptions += "&lt;option value=\\"" + res.DATA[i] + "\\"&gt;" + res.DATA[i] + "&lt;/option&gt;";
                }
                $("#years").children().end().append(newoptions);
            });
        });
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;form&gt;
        &lt;select name="make" id="make"&gt;
            &lt;option value="" selected&gt;Please Select...&lt;/option&gt;
            &lt;option value="APRILIA"&gt;APRILIA&lt;/option&gt;
            &lt;option value="BENELLI"&gt;BENELLI&lt;/option&gt;
            &lt;option value="BIMOTA"&gt;BIMOTA&lt;/option&gt;
            &lt;option value="BMW"&gt;BMW&lt;/option&gt;
            &lt;option value="BUELL"&gt;BUELL&lt;/option&gt;
        &lt;/select&gt;
        &lt;label for="models"&gt;Models&lt;/label&gt;
        &lt;select name="models" id="models"&gt;
            &lt;option value=""&gt;Select a Model&lt;/option&gt;
        &lt;/select&gt;
        &lt;label for="Years"&gt;Years&lt;/label&gt;
        &lt;select name="years" id="years"&gt;
            &lt;option value=""&gt;Select a Year&lt;/option&gt;
        &lt;/select&gt;
    &lt;/form&gt;
&lt;/body&gt;

</html>