Populate dropdown/textbox with cascading data

JavaScript
1

Hello,

I was wondering if I could get a bit of help with some JavaScript.

I have 3 option boxes that ask what CPU Manufacture, CPU Family and CPU processor you have then, the Codename, Frequency, Core, Memory and Notes will auto populate.

I have a Data.js with the information stored and have been advised to store it this way. If there’s a better way please let me know. I don’t have PHP yet but that will be an option.

From the data I would like the dropdowns to auto populate the rest of the information from the 3 boxes selected.

Here is what I have so far.

<div class="item_information description-box">
  <span>CPU</span>
  <label class="switch">
    <input class="checkbox-cpu" type="checkbox" checked="checked">
    <span class="slider round"></span>
  </label>
</div>
<div class="item_information">
  <span>Manufacturer <span class="required-star">*</span></span>
  <select id="cpu-select" name="">
    <option value="--Select--">--Select--</option>
    <option value="Intel">Intel</option>
    <option value="AMD">AMD</option>
  </select>

</div>
<div class="item_information">
  <span>Family <span class="required-star">*</span></span>
  <select id="family-select" name="">
    <option value="--Select--">--Select--</option>
  </select>
</div>
<div class="item_information">
  <span>Processor<span class="required-star">*</span></span>
  <select id="processor-select" name="" onChange="update()">
    <option value="--Select--">--Select--</option>
  </select>
</div>
<div class="item_information">
  <span>Codename</span>
  <select id="CPU-Codename" name="">
    <option value="-- Auto Selected --">-- Auto Selected --</option>
  </select>
</div>
<div class="item_information">
  <span>Frequency</span>
  <input type="text" name="" id="CPU-Frequency" value="Auto Selected">
</div>
<div class="item_information">
  <span>Number of CPU Cores</span>
  <select id="CPU-No-core" name="">
    <option value="-- Auto Selected --">-- Auto Selected --</option>
  </select>
</div>
<div class="item_information">
  <span>Physical Memory</span>
  <input type="text" name="" id="CPU-Pys-Memory" value="Auto Selected">
</div>
<div class="item_information description-box">
  <span>Notes
  </span>
  <textarea id="CPU-Description" name="" cols="40" rows="5"></textarea>
</div>

$('#cpu-select').on('change', function(e) {
    var source = $(this),
        val = $.trim(source.val()),
        target = $('#family-select');
    $(target).empty();
    if (typeof(_data[val]) != "undefined") {
        var options = (typeof(_data[val]) != "undefined") ? _data[val] : {};
        $('<option>-- Select --</option>').appendTo(target);
        $.each(options, function(value, index) {
            $('<option value="' + value + '">' + index + '</option>').appendTo(target);
        });
    }

});


$('#family-select').on('change', function(e) {
    var source = $(this),
        val = $.trim(source.val()),
        target = $('#processor-select');
    $(target).empty();
    if (typeof(_data_family[val]) != "undefined") {
        var options = (typeof(_data_family[val]) != "undefined") ? _data_family[val] : {};
        $('<option>-- Select --</option>').appendTo(target);
        $.each(options, function(value, index) {
            $('<option value="' + value + '">' + index + '</option>').appendTo(target);
        });
    }

});

I have been told to store the data like this below, how do I go about making that work?

var cpu_data = [
  {
    "manufacturer": "Intel",
    "family": "Celeron",
    "processor": [
      {
        "processor": "220",
        "codename": "",
        "frequency": "1.2 Ghz",
        "cores": "1",
        "memory": "512 KB",
        "notes": ""
      },
      {
        "processor": "300A",
        "codename": "",
        "frequency": "0.3 Ghz",
        "cores": "1",
        "memory": "128 KB",
        "notes": ""
      }
    ]
  },

  {
    "manufacturer": "Intel",
    "family": "Celeron D",
    "processor": [
      {
        "processor": "310",
        "codename": "",
        "frequency": "2.133 Ghz",
        "cores": "1",
        "memory": "256 KB",
        "notes": ""
      },
      {
        "processor": "315",
        "codename": "",
        "frequency": "2.267 Ghz",
        "cores": "1",
        "memory": "256 KB",
        "notes": ""
      },
      {
        "processor": "320",
        "codename": "",
        "frequency": "2.4 Ghz",
        "cores": "1",
        "memory": "256 KB"
        "notes"
    }
    ]
  },

  {
    "manufacturer": "Intel",
    "family": "Celeron Dual-Core",
    "processor": [
      {
        "processor": "E1200",
        "codename": "",
        "frequency": "1.6 Ghz",
        "cores": "2",
        "memory": "512 KB",
        "notes": ""
      },
      {
        "processor": "E1400",
        "codename": "",
        "frequency": "2 Ghz",
        "cores": "2",
        "memory": "512 KB",
        "notes": ""
      },
      {
        "processor": "E1500",
        "codename": "",
        "frequency": "2.2 Ghz",
        "cores": "2",
        "memory": "512 KB",
        "notes": ""
      },
      {
        "processor": "E1600",
        "codename": "",
        "frequency": "2.4 Ghz",
        "cores": "2",
        "memory": "512 KB",
        "notes": ""
      },
      {
        "processor": "E3200",
        "codename": "",
        "frequency": "2.4 Ghz",
        "cores": "2",
        "memory": "1024 KB",
        "notes": ""
      },
      {
        "processor": "E3300",
        "codename": "",
        "frequency": "2.5 Ghz",
        "cores": "2",
        "memory": "1024 KB",
        "notes": ""
      },
      {
        "processor": "E3400",
        "codename": "",
        "frequency": "2.6 Ghz",
        "cores": "2",
        "memory": "1024 KB",
        "notes": ""
      }
    ]
  }
];

Kind regards,
Kyle

2

Perhaps if you read my article on populating multiple dropdowns dynamically you will get the general idea and can use some of the teachings to then make changes as needed for your script. You can read the article here…

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.