Change the drop down option based on the selected option from other combobox

Question

I have 2 drop downs and if I am selecting a particular option from 1st drop down a set of options should appear in the other drop down and if I select other option from 1st drop down Different set of options should appear in 2nd drop down.

I tried making a fiddle but its not working.

function createOption(value) {
    el = document.createElement('option');
    el.value = value;
    el.innerHTML = value;
    el.id = value;

    document.getElementById('select').appendChild(el);
}

if(document.getElementById('Type').value === "CD"){
    document.getElementById('select').innerHTML = '';

    createOption('Volvo');
    createOption('Saab');
    createOption('Fiat');
};
else{
      document.getElementById('select').innerHTML = '';
        createOption('Wood');
        createOption('Brick')
}

http://jsfiddle.net/33tJR/10/

Please help :)

Answer 1

The main problem with your code is that you don't have any event listeners on an actual " onchange " event that will occur on the first dropdown.

Easy solution for your current code would be something like this:

function createOption(value) {
    el = document.createElement('option');
    el.value = value;
    el.innerHTML = value;
    el.id = value;

    document.getElementById('select').appendChild(el);
}
document.getElementById('Type').addEventListener("change", function(){
  if(document.getElementById('Type').value === "CD"){
      document.getElementById('select').innerHTML = '';

      createOption('Volvo');
      createOption('Saab');
      createOption('Fiat');
  }
  else{
      document.getElementById('select').innerHTML = '';
      createOption('Wood');
      createOption('Brick')
  }
});