如何从数组JavaScript显示复选框值

Question

我有一个下拉按钮（模型）的值数组，该按钮生成动态复选框（目标）。但是，我想根据所选模型和检查的目的地显示不同的条件。我很抱歉这个问题。我是javascript新手，还在学习中。谢谢

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

您必须用引号将id包裹起来

    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

请尝试以下代码，我对您的代码进行了一些更改。

    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>