Question

应该是非常简单的级联下拉列表，第三个和第四个下拉列表正在填充。

从第一个下拉菜单中进行选择将按预期填充第二个下拉菜单。但是从第二个下拉菜单中进行选择不会影响第三或第四个下拉菜单。

我确定我错过了一些显而易见的事情，但我找不到。任何帮助表示赞赏。

Container (
    child: MyWidget()
)


Widget MyWidget() {
    if (...) {
        return new MaterialButton(
            ...
        )
    }

    return Container();
}

https://jsfiddle.net/mbps1/bt9m3qoj/1/

Answer 1

在invoicetypeSel.onchange内，您的目的是从clientPlus [Second Value]获取值，而您忘记提供对象的第一个值。

for (var payer in clientPlus[clientSel.value][this.value]) {
    payerSel.options[payerSel.options.length] = new Option(payer, payer);
}

Answer 2

for和clientSel.onchange中两个invoiceTypeSel.onchange循环的控制条件是相同的。换句话说，在两种情况下，它们都在相同的键值对上进行迭代（即cientPlus[some ID]）。在第一种情况下，根据客户选择填充“ invoiceType”时，这很好，因为您将获得具有两个属性的对象：每月和交易（每个都引用一个对象），但是在第二种情况下，当您想要填充时'playerType'，使用相同的循环很难令人满意。相反，您要遍历对象更深一层：clientPlus[some ID][whatever the selection for invoiceType was]。

但是，应该指出的是，该数据结构似乎是多余的。相同且反复重复的值最好只存储一次。

<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>

为什么此级联下拉JavaScript中的第三个和第四个框没有填充？

2 个答案: