SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help! jquery using returned JSON data to write html

    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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    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. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <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 brand
    if (selected == "") return;
    $.getJSON("getfitmentdata09.cfc?method=getmotomodels&returnformat=json", {
    "make": selected
    }, function (res, code) {
    var newoptionsyears = "";
    for (var i = 0; i < res.DATA.length; i++) {
    newoptionsyears += "<option value=\"" + res.DATA[i] + "\">" + res.DATA[i] + "</option>";
    }
    $("#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("<option value=\"\">Select a Stinkin Year</option>");
    });
    //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 < res.DATA.length; i++) {
    newoptions += "<option value=\"" + res.DATA[i] + "\">" + res.DATA[i] + "</option>";
    }
    $("#years").children().end().append(newoptions);
    });
    });
    })
    </script>
    </head>

    <body>
    <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>
    <option value="BMW">BMW</option>
    <option value="BUELL">BUELL</option>
    </select>
    <label for="models">Models</label>
    <select name="models" id="models">
    <option value="">Select a Model</option>
    </select>
    <label for="Years">Years</label>
    <select name="years" id="years">
    <option value="">Select a Year</option>
    </select>
    </form>
    </body>

    </html>
    Last edited by preserved; Apr 18, 2012 at 05:30. Reason: typo


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •