Populate drop down list from array using JQuery

Question

Assuming I have this array:

Array(
      [0] => Array(
                  [Brand] => 'Toyota',
                  [Model] => 'Camry',
                  [Color] => 'Red',
                  [Year] => 2002
      )
      [1] => Array(
                  [brand] => 'Nissan',
                  [Model] => 'Skyline',
                  [Color] => 'White',
                  [Year] => 2005
      )
      [2] => Array(
                  [Brand] => 'Honda',
                  [Model] => 'Civic',
                  [Color] => 'Green',
                  [Year] => 2000
      ) )

and then inside a drop down list I have the "keys" Brand + Model + Color + Year

Question: how can I populate another drop down list using JQuery(AJAX), with the "values" when I click on one key?

Example: When I click on Model, I want to populate another drop down list with the values Camry + Skyline + Civic, and if I click Color, pupulates with Red + White + Green and so on

Cheers!

Answer 1

If your array is cars[] and your select boxes have IDs of "sourceBox" and "targetBox" respectively, the following code will get the text of the selected item in #sourceBox and populate #targetBox with all the equivalent values from your array. So selecting "color" in #sourceBox will populate #targetBox with "red", "white", and "green."

    $(document).ready(function(){
       $('#sourceBox').change(function(){
        var options = "";
        for (var i = 0; i < cars.length; i++){
          options += '<option>' 
              + cars[i][$('#sourceBox option:selected').text()] 
              + '</option>';
        }
        $('#targetBox').html(options);
        });
    });

Answer 2

Just a very general piece of code. You should be more specific (show HTML you want created from that PHP array). Anyways here it goes. This will just create JS arrays with values from your PHP array. It should be easy to work with those then:

<?php

$brands = array();
$models = array();
$colors = array();
$years = array();
foreach ($arr as $k=>$v) {
    switch ($k) {
        case 'Brand':
            $brands[] = $v;
            break;
        case 'Model':
            $models[] = $v;
            break;
        case 'Color':
            $colors[] = $v;
            break;
        case 'Years':
            $years[] = $v;
            break;
    }
}

?>

<script type="text/javascript">
    //<!--
$(document).ready(function() {

    var brands = new Array(<?php echo count($brands); ?>);
    var models = new Array(<?php echo count($models); ?>);
    var colors = new Array(<?php echo count($colors); ?>);
    var years = new Array(<?php echo count($years); ?>);

<?php

$i = 0;
foreach ($brands as $v) {
    echo 'brands[' . $i. '] = ' . $v . ';'
    ++$i;
}
$i = 0;
foreach ($models as $v) {
    echo 'models[' . $i. '] = ' . $v . ';'
    ++$i;
}
$i = 0;
foreach ($colors as $v) {
    echo 'colors[' . $i. '] = ' . $v . ';'
    ++$i;
}$i = 0;
foreach ($years as $v) {
    echo 'brands[' . $i. '] = ' . $v . ';'
    ++$i;
}

?>

    // now you should have items from your PHP array in JS arrays so you can do something with them

    $('a.populate-brands').click(function() {
        for (v in brands) {
            //
        } 
    })

});    //-->
</script>