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  : " +
" <select id='mcuc_selection'>" +
"</select>" +
"  <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 :" +
" <select id='oc_selection'></select> " +
"<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 :" +
"<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: </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>" +
" <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 :
<select id="filter"></select>
<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数据中填充的，但是我无法填充这些动态生成的选择框。
答案 0 :(得分：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  : " +
" <select id='mcuc_selection'>" +
"</select>" +
"  <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 :" +
" <select id='oc_selection'></select> " +
"<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 :" +
"<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: </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>" +
" <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 :
<select id="filter"></select>
<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>