Path: csiph.com!newsfeed.hal-mli.net!feeder3.hal-mli.net!newsfeed.hal-mli.net!feeder1.hal-mli.net!npeer02.iad.highwinds-media.com!news.highwinds-media.com!feed-me.highwinds-media.com!postnews.google.com!glegroupsg2000goo.googlegroups.com!not-for-mail
From: fongemie@gmail.com
Newsgroups: comp.lang.javascript
Subject: Help! jquery using returned JSON data to write html
Date: Tue, 17 Apr 2012 10:53:01 -0700 (PDT)
Organization: http://groups.google.com
Lines: 53
Message-ID: <25563245.22.1334685181827.JavaMail.geo-discussion-forums@ynll9>
NNTP-Posting-Host: 74.75.247.159
Mime-Version: 1.0
Content-Type: text/plain; charset=ISO-8859-1
X-Trace: posting.google.com 1334685279 29864 127.0.0.1 (17 Apr 2012 17:54:39 GMT)
X-Complaints-To: groups-abuse@google.com
NNTP-Posting-Date: Tue, 17 Apr 2012 17:54:39 +0000 (UTC)
Complaints-To: groups-abuse@google.com
Injection-Info: glegroupsg2000goo.googlegroups.com; posting-host=74.75.247.159; posting-account=l0mI2woAAACF8YJUSh4IhMwO7plU4KkW
User-Agent: G2/1.0
X-Received-Bytes: 2681
Xref: csiph.com comp.lang.javascript:13431

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 a make in the first drop down, the second 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>