Home/ Questions/Q 6943203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T13:07:31+00:00

I have been given an array in the following format and need to put

  • 0

I have been given an array in the following format and need to put it into two drop down boxes one with make and the other with model based on the first selection. (the actual array is huge, but I have just included the first few)

var aMember = [{
    "Make": "other",
    "Models": ["other"]
}, {
    "Make": "Boat",
    "Models": ["Over 21 ft.", "Under 21 ft."]
}, {
    "Make": "Motorcycle",
    "Models": ["Over 600cc", "Under 600cc"]
}];

I need to have a make combo box with Other, Boat and Motorcycle, which when selected populates the second combo box with the options.

I have done almost no JavaScript before, but have tried the following, which does not work.
I really don’t know if I am anywhere near to what I need.

<html>
<head>
<script>
var cars =[{"Make":"other","Models":["other"]},{"Make":"Boat","Models":["Over 21 ft.","Under 21 ft."]},{"Make":"Motorcycle","Models":["Over 600cc","Under 600cc"]}];

function populateDropdown(drop, items) {
   drop.empty();
   for(var i = 0; i < items.length; i++) {
      drop.append('<option value=' + i + '>' + items[i].Make + '</option>');
   }
   drop.show();
}

populateDropdown( $('#Makes'), cars );


$('#Models').change(function() {
   var modelIndex = $(this).val();
   var model = Models[modelIndex ];

   populateDropdown( $('#Models'), cars.Models);

});

</script>
</head>
<body onload = "populateDropdown( $('#Makes'), cars );">
<form>


MAKE:
<select name = 'Makes'>
</select>
MODEL:
<select name = 'Models'>
</select>

</select>
</form>
</body>
</html>

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    • You can use $.grep to filter out the current make, and then fetch the models of that make.
    • You can use $.map to map the array with all data to an array of makes.
    • $.each can be used.
    • You can use $("<option>").val(...).text(...) to build the option a little cleaner.
    • You need $(function() {...}) to wait until the DOM is ready.
    • drop.show() is not needed since both selects are already visible
    • You’re populating Models on Models‘s change event. I think you mean to run that on Makes‘s change event.
    • You’re using name instead of id. Also you should not use spaces around the = in HTML attributes.

    This is a corrected version: http://jsfiddle.net/zJTnw/1/.

    $(function(){
    var cars = [
        {"Make":"other",
         "Models": ["other"]},

        {"Make":"Boat",
         "Models": ["Over 21 ft.","Under 21 ft."]},

        {"Make":"Motorcycle",
         "Models": ["Over 600cc","Under 600cc"]}
    ];

    function populateDropdown(drop, items) {
        drop.empty();

        $.each(items, function(i, v) { // `i` is index, `v` is element
            drop.append($("<option>").val(v).text(v));
        });
    }

    populateDropdown($('#Makes'), $.map(cars, function(x) {
        return x.Make; // map `cars` to an array of makes
    }));

    $('#Makes').change(function() {
        var make = $(this).val();

        var item = $.grep(cars, function(x) { // get item of this make
            return x.Make === make;
        });

        populateDropdown($('#Models'), item[0].Models); // populate with models
    });
});
    • 0