为什么此级联下拉JavaScript中的第三个和第四个框没有填充？
[英]Why aren't third and fourth boxes in this cascading drop-downs javascript not populating?
问题描述
Should be very simple cascading dropdowns, the the third and fourth dropdowns are populating. 
应该是非常简单的级联下拉菜单，正在填充第三和第四下拉菜单。
Selection from first dropdown populates second dropdown as expected. 从第一个下拉菜单中进行选择将按预期填充第二个下拉菜单。 But selection from second dropdown does not impact third or fourth dropdown. 但是从第二个下拉菜单中进行选择不会影响第三个或第四个下拉菜单。
I'm sure I've missed something obvious but I can't find it. 我敢肯定我错过了一些显而易见的事情，但我找不到。 Any help appreciated. 任何帮助表示赞赏。
<html> <head> <script type="text/javascript"> var clientPlus = { "Client A": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } }, "Client B": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } }, "Client C": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } } } window.onload = function() { //Get html elements var clientSel = document.getElementById("clientSel"); var invoicetypeSel = document.getElementById("invoicetypeSel"); var payerSel = document.getElementById("payerSel"); var sorbSel = document.getElementById("sorbSel"); //Load clients for (var client in clientPlus) { clientSel.options[clientSel.options.length] = new Option(client, client); } //client Changed clientSel.onchange = function() { invoicetypeSel.length = 1; // remove all options bar first payerSel.length = 1; // remove all options bar first sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var invoicetype in clientPlus[this.value]) { invoicetypeSel.options[invoicetypeSel.options.length] = new Option(invoicetype, invoicetype); } } //Invoice Type Changed invoicetypeSel.onchange = function() { payerSel.length = 1; // remove all options bar first sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var payer in clientPlus[this.value]) { payerSel.options[payerSel.options.length] = new Option(payer, payer); } } //Payer Changed payerSel.onchange = function() { sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done var sorbs = clientPlus[clientSel.value][invoicetypeSel.value][this.value]; for (var i = 0; i < sorbs.length; i++) { sorbSel.options[sorbSel.options.length] = new Option(sorbs[i], sorbs[i]); } } } </script> </head> <body> <form name="myform" id="myForm"> <select id="clientSel" size="1"> <option value="" selected="selected">Select Client:</option> </select> <br> <br> <select id="invoicetypeSel" size="1"> <option value="" selected="selected">Select Invoice Type:</option> </select> <br> <br> <select id="payerSel" size="1"> <option value="" selected="selected">Select Payer Type:</option> </select> <br> <br> <select id="sorbSel" size="1"> <option value="" selected="selected">Successful or Busted?</option> </select> </form> </body> </html>
https://jsfiddle.net/mbps1/bt9m3qoj/1/ https://jsfiddle.net/mbps1/bt9m3qoj/1/
2 个解决方案
解决方案1
1 2019-02-06 17:41:33
inside invoicetypeSel.onchange , your for is getting values from clientPlus[Second Value] you are forgetting to also supply the first value of your object. 在invoicetypeSel.onchange内部，您正在从clientPlus [Second Value]获取值，而您忘记了也提供对象的第一个值。
for (var payer in clientPlus[clientSel.value][this.value]) {
payerSel.options[payerSel.options.length] = new Option(payer, payer);
}
解决方案2
0 2019-02-07 09:38:37
The control conditions for both for cyles in clientSel.onchange and invoiceTypeSel.onchange are the same. 对于对照条件for在个循环clientSel.onchange和invoiceTypeSel.onchange是相同的。 In other words, they are iterating over the same key value pairs in both cases (ie cientPlus[some ID] ). 换句话说，在两种情况下，它们都在相同的键值对上进行迭代（即cientPlus[some ID] ）。 In the first case, when populating 'invoiceType' based on client selection, it is fine since you'll get an object with two attributes: Monthly and Transactional (each referencing an object), but in the second case, when you want to populate 'playerType', it's hardly satisfying to use the same cycle. 在第一种情况下，根据客户选择填充“ invoiceType”时，这很好，因为您将获得具有两个属性的对象：每月和交易（每个都引用一个对象），但是在第二种情况下，当您想要填充时'playerType'，使用相同的循环很难令人满意。 Instead, you want to iterate over the object one level deeper : clientPlus[some ID][whatever the selection for invoiceType was] . 相反，您想遍历对象的更深一层 ： clientPlus[some ID][whatever the selection for invoiceType was] 。
It should be noted however, that this data structure seems redundant. 但是，应该指出的是，这种数据结构似乎是多余的。 Values that are the same and repeating over and over would be better stored once only. 相同且反复重复的值最好只存储一次。
<html> <head> <script type="text/javascript"> var clientPlus = { "Client A": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } }, "Client B": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } }, "Client C": { "Transactional": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] }, "Monthly": { "Single": ["Successful", "Busted"], "Third Party": ["Successful", "Busted"], "Joint": ["Successful", "Busted"] } } } window.onload = function() { //Get html elements var clientSel = document.getElementById("clientSel"); var invoicetypeSel = document.getElementById("invoicetypeSel"); var payerSel = document.getElementById("payerSel"); var sorbSel = document.getElementById("sorbSel"); //Load clients for (var client in clientPlus) { clientSel.options[clientSel.options.length] = new Option(client, client); } //client Changed clientSel.onchange = function() { invoicetypeSel.length = 1; // remove all options bar first payerSel.length = 1; // remove all options bar first sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var invoicetype in clientPlus[this.value]) { invoicetypeSel.options[invoicetypeSel.options.length] = new Option(invoicetype, invoicetype); } } //Invoice Type Changed invoicetypeSel.onchange = function() { payerSel.length = 1; // remove all options bar first sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var payer in clientPlus[clientSel.options[clientSel.selectedIndex].value][this.value]) { payerSel.options[payerSel.options.length] = new Option(payer, payer); } } //Payer Changed payerSel.onchange = function() { sorbSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done var sorbs = clientPlus[clientSel.value][invoicetypeSel.value][this.value]; for (var i = 0; i < sorbs.length; i++) { sorbSel.options[sorbSel.options.length] = new Option(sorbs[i], sorbs[i]); } } } </script> </head> <body> <form name="myform" id="myForm"> <select id="clientSel" size="1"> <option value="" selected="selected">Select Client:</option> </select> <br> <br> <select id="invoicetypeSel" size="1"> <option value="" selected="selected">Select Invoice Type:</option> </select> <br> <br> <select id="payerSel" size="1"> <option value="" selected="selected">Select Payer Type:</option> </select> <br> <br> <select id="sorbSel" size="1"> <option value="" selected="selected">Successful or Busted?</option> </select> </form> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.