Question

我有3级下拉菜单。每个菜单都是相互关联的。第一个选择的菜单将导致第二个菜单，第二个菜单将导致第三个菜单。请看一下 my animated screenshot here

我们可以在控制台中看到，每个onChange事件的输出都会保持加倍。在HTML中，结果只有一个，但在控制台中，它显示多个记录。

查看我的代码

$(document).ready(function() {
  var dataInfo = {
    "==Please choose==": {
      "==Please choose==": {
        "==Please choose==": {
          "data": "==Please choose=="
        }
      }
    },
    "Data A - level 1": {
      "Data A1 - level 2": {
        "Data A11 - level 3": {
          "data": "Info data A11"
        },
        "Data A12 - level 3": {
          "data": "Info data A12"
        }
      },
      "Data A2 - level 2": {
        "Data A21 - level 3": {
          "data": "Info data A21"
        }
      },
      "Data A3 - level 2": {
        "Data A31 - level 3": {
          "data": "Info data A31"
        }
      }
    },
    "Data B - level 1": {
      "Data B1 - level 2": {
        "Data B11 - level 3": {
          "data": "Info data B11"
        }
      },
      "Data B2 - level 2": {
        "Data B21 - level 3": {
          "data": "Info data B21"
        }
      }
    }
  }

  "use strict";

  var objData1, objData2, objData3;
  var data1, data2, data3;

  success(dataInfo)

  function success(dataInfo) {
    objData1 = dataInfo;
    var variable1 = $("#level1").on("change", function() {
      viewData2(objData1[this.value])
    });
    for (data1 in objData1) {
      $("<option />").val(data1).text(data1).appendTo(variable1);
    }
    variable1.change();
  }

  function viewData2(objData1) {
    objData2 = objData1;
    var variable2 = $("#level2").on("change", function() {
      viewData3(objData2[this.value])
    });
    $("#level2").empty();
    for (data2 in objData2) {
      $("<option />").val(data2).text(data2).appendTo(variable2);
    };
    variable2.change();
  }

  //start doubling
  function viewData3(objData2) {
    objData3 = objData2;
    var variable3 = $("#level3").on("change", function() {
      valueTextbox(objData3[this.value]);
    });
    $("#level3").empty();
    for (data3 in objData3) {
      $("<option />").val(data3).text(data3).appendTo(variable3);
    };
  }

  function valueTextbox(k) {
    console.log(k)
    var z = JSON.stringify(k);
    $.each(k, function() {
      $("#mydata").text(z)
    })
  }



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-group">
  <label for="level1">level1</label>
  <select id="level1"></select>
</div>

<div class="form-group">
  <label for="level2">level2</label>
  <select id="level2"></select>
</div>

<div class="form-group">
  <label for="level3">level3</label>
  <select id="level3"></select>
</div>

<div id="mydata"></div>

我的问题：

1.我可以通过put（）来避免每个onChange请求重复下拉列表。是否有任何类似的处理对象的解决方案？

jQuery JSON对象在onChange事件时保持重复

0 个答案: