使用json数据填充动态生成的选择框

Question

var addFilter = {
  "select": "--select--",
  "mcus": "Multi Company Use Case",
  "oc": "Order Condition",
  "ot": "Order Type",
  "dt": "Date&Time",
};

var multiCompanyUseCase = {
  "select": "--select--",
  "ags": "AGS",
  "agl": "AGL",
  "nafn": "NAFN",
};

var orderType = {
  "select": "--select--",
  "so": "Shadow Order",
  "co": "Customer Order",
};

function addToFilter(divName) {
  var val = document.getElementById('filter').value;
  var newdiv = document.createElement('div');

  switch (val) {
    case 'mcus':
      newdiv.innerHTML = newdiv.innerHTML = "<div class='container'>Multi company use case &nbsp: " +
        "&nbsp;<select id='mcuc_selection'>" +
        "</select>" +
        "&nbsp;&nbsp<img src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
        "<hr style='width:900px; margin-left:0px;'></div>";
      break;
      break;

    case 'ot':
      newdiv.innerHTML = "<div class='container'>Order Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
        "&nbsp;&nbsp;<select id='oc_selection'></select> &nbsp;" +
        "<img src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
        "<hr style='width:900px; margin-left:0px;'></div>";
      break;

    case 'dt':
      newdiv.innerHTML = "<div class='container'>Date&Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
        "<div id='startDate' class='input-append date' style='margin-left:165px; margin-top:-20px'>" +
        "<label>Start Date&Time: </label>" +
        "<input  id='date1' type='text' style='width:200px; height:15%'></input>" +
        "<span class='add-on' style='height:26px'>" +
        "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
        "</span>" +
        "</div>" +
        "<div id='endDate' class='input-append date' style='margin-left:550px; margin-top:-55px'>" +
        "<label>End Date&Time:&nbsp;</label>" +
        "<input type='text' style='width:200px; height:15%'></input>" +
        "<span class='add-on' style='height:26px'>" +
        "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
        "</span>" +
        "</div>" +
        "&nbsp;<img src='remove-icon.jpg' alt='remove'  onmouseover='' style='cursor: pointer; margin-left:780px; margin-top:-55px' class='remove-icon'><hr style='width:900px; margin-left:0px;'></div>";
      break;

  }
  document.getElementById(divName).appendChild(newdiv);
  if (val == "dt") {
    callDate();
  }
}


function callDate() {
  $('#startDate').datetimepicker({
    format: 'dd/MM/yyyy hh:mm:ss PP',
    language: 'en',
    pick12HourFormat: true
  });

  $('#endDate').datetimepicker({
    format: 'dd/MM/yyyy hh:mm:ss PP',
    language: 'en',
    pick12HourFormat: true
  });
}

$.each(addFilter, function(key, value) {
  $('#filter').append('<option value="' + key + '">' + addFilter[key] + '</option>');
});

$.each(multiCompanyUseCase, function(key, value) {
  $('#mcuc_selection').append('<option value="' + key + '">' + multiCompanyUseCase[key] + '</option>');
});

$.each(orderType, function(key, value) {
  $('#oc_selection').append('<option value="' + key + '">' + orderType[key] + '</option>');
});


$(document).on('click', '.container', function() {
  $(".remove-icon").on("click", function() {
    $(this).parent(".container").remove();
  });
});

$(".remove-icon").on("click", function() {
  $(this).parent(".container").remove();
}); < /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="flt" class="x_content">
  <br>
  <div id="div_filter1">
    <div id="div_filter2">
      Add Filters&nbsp;&nbsp;&nbsp;&nbsp;:
      <select id="filter"></select>
      &nbsp;
      <img id="add-icon" src="add-icon.jpg" alt="add" onmouseover="" style="cursor: pointer;" onclick="addToFilter('div_filter1');">
      <button id="go" type="submit" value="Submit">Go</button>
      <br>
      <hr style='width:1100px; margin-left:0px; margin-top: 20px;'>
    </div>
  </div>
</div>

我已根据主选择框选择的内容生成了选择框，我需要用json数据填充这些动态生成的选择框。虽然主要的静态选择框是从json数据中填充的，但是我无法填充这些动态生成的选择框。

Answer 1

创建后，您需要调用该函数来填充下拉列表。

您的代码尝试填充从未创建的下拉列表，并且jQuery无法找到该下拉列表。

var addFilter = {
            "select": "--select--",
            "mcus": "Multi Company Use Case",
            "oc": "Order Condition",
            "ot": "Order Type",
            "dt": "Date&Time",
        };

        var multiCompanyUseCase = {
            "select": "--select--",
            "ags": "AGS",
            "agl": "AGL",
            "nafn": "NAFN",
        };

        var orderType = {
            "select": "--select--",
            "so": "Shadow Order",
            "co": "Customer Order",
        };

        function addToFilter(divName) {
            var val = document.getElementById('filter').value;
            var newdiv = document.createElement('div');

            switch (val) {
                case 'mcus':
                    newdiv.innerHTML = "<div class='container'>Multi company use case &nbsp: " +
                      "&nbsp;<select id='mcuc_selection'>" +
                      "</select>" +
                      "&nbsp;&nbsp<img src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
                      "<hr style='width:900px; margin-left:0px;'></div>";
                    break;

                case 'oc':
                    newdiv.innerHTML = "<div class='container'>Order Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
                      "&nbsp;&nbsp;<select id='oc_selection'></select> &nbsp;" +
                      "<img src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;' class='remove-icon'>" +
                      "<hr style='width:900px; margin-left:0px;'></div>";
                    break;

                case 'dt':
                    newdiv.innerHTML = "<div class='container'>Date&Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" +
                      "<div id='startDate' class='input-append date' style='margin-left:165px; margin-top:-20px'>" +
                      "<label>Start Date&Time: </label>" +
                      "<input  id='date1' type='text' style='width:200px; height:15%'></input>" +
                      "<span class='add-on' style='height:26px'>" +
                      "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
                      "</span>" +
                      "</div>" +
                      "<div id='endDate' class='input-append date' style='margin-left:550px; margin-top:-55px'>" +
                      "<label>End Date&Time:&nbsp;</label>" +
                      "<input type='text' style='width:200px; height:15%'></input>" +
                      "<span class='add-on' style='height:26px'>" +
                      "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>" +
                      "</span>" +
                      "</div>" +
                      "&nbsp;<img src='remove-icon.jpg' alt='remove'  onmouseover='' style='cursor: pointer; margin-left:780px; margin-top:-55px' class='remove-icon'><hr style='width:900px; margin-left:0px;'></div>";
                    break;

            }
            document.getElementById(divName).appendChild(newdiv);
            if (val == "dt") {
                callDate();
            }
            else if (val == 'mcus')
            {
                $.each(multiCompanyUseCase, function (key, value) {
                    $('#mcuc_selection').append('<option value="' + key + '">' + multiCompanyUseCase[key] + '</option>');
                });
            }
            else if (val == 'oc') {
                $.each(orderType, function (key, value) {
                    $('#oc_selection').append('<option value="' + key + '">' + orderType[key] + '</option>');
                });
            }
        }


        function callDate() {
            $('#startDate').datetimepicker({
                format: 'dd/MM/yyyy hh:mm:ss PP',
                language: 'en',
                pick12HourFormat: true
            });

            $('#endDate').datetimepicker({
                format: 'dd/MM/yyyy hh:mm:ss PP',
                language: 'en',
                pick12HourFormat: true
            });

        }

        // populate on load.
        $.each(addFilter, function (key, value) {
            $('#filter').append('<option value="' + key + '">' + addFilter[key] + '</option>');
        });

        $(document).on('click', '.container', function () {
            $(".remove-icon").on("click", function () {
                $(this).parent(".container").remove();
            });
        });

        $('#add-icon').on('click', function () {
            addToFilter('div_filter1');
        });

        $(".remove-icon").on("click", function () {
            $(this).parent(".container").remove();
        });


<div id="flt" class="x_content">
  <br/>
  <div id="div_filter1">
    <div id="div_filter2">
      Add Filters&nbsp;&nbsp;&nbsp;&nbsp;:
      <select id="filter"></select>
      &nbsp;
      <img id="add-icon" src="add-icon.jpg" alt="add" onmouseover="" style="cursor: pointer;"/> 
      <button id="go" type="submit" value="Submit">Go</button>
      <<br/>>
      <hr style='width:1100px; margin-left:0px; margin-top: 20px;'/>
    </div>
  </div>
</div>