Почему третий и четвертый блоки в этом каскадном выпадающем javascript не заполняются? - PullRequest
Новая
       41

Почему третий и четвертый блоки в этом каскадном выпадающем javascript не заполняются?

0 голосов
/ 06 февраля 2019

Должны быть очень простые каскадные выпадающие списки, заполняются третий и четвертый выпадающие списки.

Выбор из первого раскрывающегося списка заполняет второй раскрывающийся список, как и ожидалось.Но выбор из второго раскрывающегося списка не влияет на третий или четвертый раскрывающийся список.

Я уверен, что упустил что-то очевидное, но не могу его найти.Любая помощь приветствуется. 

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

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Условия контроля для обоих for циклов в clientSel.onchange и invoiceTypeSel.onchange одинаковы.Другими словами, они итерируют по одним и тем же парам ключ-значение в обоих случаях (т. Е. cientPlus[some ID]).В первом случае при заполнении invoiceType на основе выбора клиента это нормально, поскольку вы получите объект с двумя атрибутами: Monthly и Transactional (каждый ссылается на объект), но во втором случае, когда вы хотите заполнить'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>
0 голосов
/ 06 февраля 2019

внутри invoicetypeSel.onchange, вы получаете значения из clientPlus [Второе значение], которое вы забыли также указать первое значение вашего объекта. 

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