I am new to JavaScript programming. My program gives me another dropdown menu based on the selection of the first dropdown menu. I am trying figure out how I can add checkbox into my dropdown so that I can check different types of fruits or vegetables.
<script>
window.onload = function() {
// provs is an object but you can think of it as a lookup table
var provs = {
'Vegetable': ['Broccoli', 'Cabbage','Carrot'],
'Fruit': ['Tomato', 'Apple','Orange']
},
// just grab references to the two drop-downs
food_select = document.querySelector('#food'),
type_select = document.querySelector('#type');
// populate the drop-down
setOptions(food_select, Object.keys(provs));
// populate the town drop-down
setOptions(type_select, provs[food_select.value]);
// attach a change event listener to the drop-down
food_select.addEventListener('change', function() {
// get the towns in the selected province
setOptions(type_select, provs[food_select.value]);
});
function setOptions(dropDown, options) {
// clear out any existing values
dropDown.innerHTML = '';
// insert the new options into the drop-down
options.forEach(function(value) {
dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
});
}
};
</script>
<body>
<select id="food"></select><br><br><br>
<select id="type"></select>
<body>