[英]javascript- if/else, for statements inside a switch statement
我正在使用请求门户，并且这些动态复选框，标签和文本框均取决于选项列表。
我是javascript新手，正在努力做出条件语句。 到目前为止，这是我的进度，我只复制了函数，以便在选择另一个选项但与第一个选项重叠时将显示值。
<!DOCTYPE html> <html> <head> <style> th, td { padding: 15px; font-weight: normal; } </style> <script type="text/javascript"> function populate(model, destination) { var mod = document.getElementById(model); var des = document.getElementById(destination); var cri = document.getElementById(criteria); 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", "Model-B.4"]; } 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.onclick = updateCriteria; des.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); des.appendChild(label); des.appendChild(document.createElement("br")); } } updateCriteria(); updateCriteria2(); } function updateCriteria() { var text = ""; var cri = document.getElementById("criteria").value var models = document.getElementsByTagName("label"); var model = ""; var criteria = document.getElementById("criteria"); var qty = document.getElementById("qty"); var cell = document.getElementById("cell"); for (var i = 0; i < models.length; i++) { var br = document.createElement("br"); var textbox = document.createElement("input"); var textbox1 = document.createElement("input"); var wrapper = document.createElement("span"); model = models[i].innerText; if (model == "Model-A.1") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Good\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-A.2") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Fine\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-A.3") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Bad\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } } } function updateCriteria2() { var text = ""; var cri = document.getElementById("criteria").value var models = document.getElementsByTagName("label"); var model = ""; var criteria = document.getElementById("criteria"); var qty = document.getElementById("qty"); var cell = document.getElementById("cell"); for (var i = 0; i < models.length; i++) { var br = document.createElement("br"); var textbox = document.createElement("input"); var textbox1 = document.createElement("input"); var wrapper = document.createElement("span"); model = models[i].innerText; if (model == "Model-B.1") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Latest\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.2") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "New\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.3") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Old\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.4") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Oldest\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } } } </script> </head> <body> <div class="container"> <table class="table"> <tr> <td> MODEL: </td> <td> <select id="model" name="model" onchange="populate(this.id, 'destination')"> <option value="select">--Select Model--</option> <option value="Model-A">Model-A</option> <option value="Model-B"> Model-B </option> </select> </td> </tr> </table> <table> <tr> <th> <center> DESTINATION: </th> </center> <th> <center> CRITERIA: </th> </center> <th> <center> QTY: </th> </center> <th> <center> CELL: </th> </center> </tr> <tr> <td> <center> <div id="destination" style="width:230px; word-wrap: break-word"> </center> </div> </td> <td> <center> <div id="criteria" style="width:350px; word-wrap: break-word"> </center> </div> </td> <td> <center> <div id="qty" required> </textarea> </td> </center> <td> <center> <div id="cell" required> </textarea> </td> </center> </tr> </table>
我已经修改了您的代码，请尝试以下操作：
function populate(model, destination) { var mod = document.getElementById(model); var des = document.getElementById(destination); var cri = document.getElementById("criteria"); var qty = document.getElementById("qty"); var cell = document.getElementById("cell"); var optionArray = []; if (mod.value == "Model-A") { des.innerHTML = ""; if(cri) cri.innerHTML=""; if(qty) qty.innerHTML=""; if(cell) cell.innerHTML=""; optionArray = ["Model-A.1", "Model-A.2", "Model-A.3"]; } else if (mod.value == "Model-B") { des.innerHTML = ""; if(cri) cri.innerHTML=""; if(qty) qty.innerHTML=""; if(cell) cell.innerHTML=""; optionArray = ["Model-B.1", "Model-B.2", "Model-B.3", "Model-B.4"]; } 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.onclick = updateCriteria; des.appendChild(checkbox); var label = document.createElement('label') label.htmlFor = pair; label.appendChild(document.createTextNode(pair)); des.appendChild(label); des.appendChild(document.createElement("br")); } } updateCriteria(); updateCriteria2(); } function updateCriteria() { var text = ""; var cri = document.getElementById("criteria").value var models = document.getElementsByTagName("label"); var model = ""; var criteria = document.getElementById("criteria"); var qty = document.getElementById("qty"); var cell = document.getElementById("cell"); for (var i = 0; i < models.length; i++) { var br = document.createElement("br"); var textbox = document.createElement("input"); var textbox1 = document.createElement("input"); var wrapper = document.createElement("span"); model = models[i].innerText; if (model == "Model-A.1") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Good\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-A.2") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Fine\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-A.3") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Bad\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } } } function updateCriteria2() { var text = ""; var cri = document.getElementById("criteria").value var models = document.getElementsByTagName("label"); var model = ""; var criteria = document.getElementById("criteria"); var qty = document.getElementById("qty"); var cell = document.getElementById("cell"); for (var i = 0; i < models.length; i++) { var br = document.createElement("br"); var textbox = document.createElement("input"); var textbox1 = document.createElement("input"); var wrapper = document.createElement("span"); model = models[i].innerText; if (model == "Model-B.1") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Latest\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.2") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "New\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.3") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Old\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } else if (model == "Model-B.4") { wrapper.className = model; textbox.className = model; textbox1.className = model; wrapper.innerText = "Oldest\\n"; criteria.appendChild(wrapper); criteria.appendChild(br); qty.appendChild(textbox) qty.appendChild(br) cell.appendChild(textbox1) cell.appendChild(br) } } }
<style> th, td { padding: 15px; font-weight: normal; } </style>
<!DOCTYPE html> <html> <body> <div class="container"> <table class="table"> <tr> <td> MODEL: </td> <td> <select id="model" name="model" onchange="populate(this.id, 'destination')"> <option value="select">--Select Model--</option> <option value="Model-A">Model-A</option> <option value="Model-B"> Model-B </option> </select> </td> </tr> </table> <table> <tr> <th> <center> DESTINATION: </center></th> <th> <center> CRITERIA: </center></th> <th> <center> QTY: </center></th> <th> <center> CELL: </center></th> </tr> <tr> <td> <center> <div id="destination" style="width:230px; word-wrap: break-word"></div> </center> </td> <td> <center> <div id="criteria" style="width:350px; word-wrap: break-word"></div> </center> </td> <td> <center> <div id="qty" required></div> </center></td> <td> <center> <div id="cell" required></div> </center> </td> </tr> </table> </div>
使用JavaScript中的switch和if else语句的不同输出
[英]Different outputs using switch and if else statements in JavaScript
将嵌套的else if语句转换为JavaScript中的switch语句
[英]Convert A nested else if statement in to a switch statement in JavaScript
在JavaScript中用switch语句编写if..else语句
[英]Write an if..else statement with a switch statement in JavaScript
在 JavaScript 的机会游戏中，如果语句没有移动到 else 语句
[英]If statements not moving to the else statement in a game of chance in JavaScript
在 Javascript 中：您可以将 if/else 语句转换为开关吗？
[英]In Javascript: Can you convert a if/else statement to a switch?
switch 语句 (javaScript) 只会显示 else 条件
[英]Switch statement (javaScript) will only display else condition
如何将用户输入放入数组？ for语句可以放在if / else语句中吗？ （JavaScript）
[英]How to put user input into an array? Can for statements go inside an if/else statement? (Javascript)
Javascript if-else if内部开关使用（“ #id”）。length
[英]Javascript if - else if inside switch using (“#id”).length
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.