How to display checkbox values from an array javascript

Question

I have an array of values from a dropdown button (model) that generates dynamic checkboxes (destination). However, I wanted to display different criteria depending on the selected model and checked destination. Im sorry for this question. Im new to javascript and still learning. Thanks

Javascript:

  function populate(model, destination) { var mod = document.getElementById(model); var des = document.getElementById(destination); des.innerHTML = ""; if (mod.value == "model-a") { var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"]; } else if (mod.value == "model-b") { var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"]; } else if (mod.value == "model-c") { var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"]; } for (var option in optionArray) { if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = pair; checkbox.value = pair; des.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); des.appendChild(label); des.appendChild(document.createElement("br")); } } } 

Answer 1

You have to wrap the id by quotes:

    var mod = document.getElementById('model');
    var des = document.getElementById('destination');

 function populate(model, destination) { var mod = document.getElementById('model'); var des = document.getElementById('destination'); des.innerHTML = ""; if (mod.value == "model-a") { var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"]; } else if (mod.value == "model-b") { var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"]; } else if (mod.value == "model-c") { var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"]; } for (var option in optionArray) { if (optionArray.hasOwnProperty(option)) { var pair = optionArray[option]; var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.name = pair; checkbox.value = pair; des.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); des.appendChild(label); des.appendChild(document.createElement("br")); } } } 

 <select id="model" onchange="populate();"> <option></option> <option>model-a</option> <option>model-c</option> <option>model-b</option> </select> <hr> <div id="destination"></div> 

Answer 2

Please try below code, i have made few changes in your code.

    function populate(model, destination) {
            var mod = document.getElementById(model);
            var des = document.getElementById(destination);
            des.innerHTML = "";
            if (mod.value == "model-a") {
                var optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"];
            } else if (mod.value == "model-b") {
                var optionArray = ["Model-B.1", "Model-B.2", "Model-B.3"];
            } else if (mod.value == "model-c") {
                var optionArray = ["Model-C.1", "Model-C.2", "Model-C.3"];
            }

            for (var option in optionArray) {
                if (optionArray.hasOwnProperty(option)) {
                    var pair = optionArray[option];
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.name = pair;
                    checkbox.value = pair;
                    checkbox.checked = true;
                    des.appendChild(checkbox);

                    var label = document.createElement('label')
                    label.htmlFor = pair;
                    label.appendChild(document.createTextNode(pair));

                    des.appendChild(label);
                    des.appendChild(document.createElement("br"));
                }
            }
        }

<select id="model" onchange="populate('model','destination');">
  <option></option>
  <option>model-a</option>
  <option>model-c</option>
  <option>model-b</option>
</select>