我正在处理一段代码，我必须在其中创建另一个 Div，我必须存储从多个多选下拉列表中收集的值，但我想不出这样做的逻辑。我正在使用 Jquery Multiselect 来绑定多个选项。第一张图片显示了我希望我的 Div 部分绑定从多选下拉菜单中获得的值的位置。第二张图片显示了我的多选选项。你可以从下面的图片中得到它。
以下代码是：
<div class="container-fluid" style="padding-top: 10px;" id="data_tabs">
<div class="row">
<div class="col-sm-12 product-info-tabs">
<div class="aspect-container">
<ul class="nav nav-tabs tab-panel without-space" id="ct_tab">
<li class="active"><a href="#SP_Pool" data-toggle="tab">Supply Pool</a></li>
<li><a href="#Beneficiary" data-toggle="tab">Beneficiary</a></li>
<li><a href="#Student" data-toggle="tab">Student</a></li>
<li><a href="#Institute" data-toggle="tab">Institute</a></li>
<li><a href="#Work" data-toggle="tab">Work</a></li>
<li><a href="#Economy" data-toggle="tab">Economy</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 tab-content product-info-tabs">
<div class="aspect-container tab-pane fade active in" id="SP_Pool">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a href="#Census" data-toggle="tab">Census</a></li>
<li><a href="#Unemployment" data-toggle="tab">Unemployment</a></li>
<li><a href="#KPMG" data-toggle="tab">Skill-Gaps Study</a></li>
<li><a href="#StudentStatus" data-toggle="tab">Students Status</a></li>
</ul>
<div class="row">
<div class="col-sm-12 tab-content product-info-tabs">
<div class="aspect-container tab-pane fade active in" id="Census">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="Gender" data-toggle="tab">Gender</a></li>
<li><a data-="Caste" data-toggle="tab">Caste</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="Unemployment">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="Age" data-toggle="tab">Age</a></li>
<li><a data-="Gender" data-toggle="tab">Gender</a></li>
<li><a data-="RuralUrban" data-toggle="tab">Rural/Urban</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="KPMG">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="TrainedVSNotTrained" data-toggle="tab">Trained/Training VS Not Trained/Interested</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="StudentStatus">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="Enrolled" data-toggle="tab">Enrolled</a></li>
<li><a data-="Passout" data-toggle="tab">Passout</a></li>
<li><a data-="Dropout" data-toggle="tab">Dropout</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="aspect-container tab-pane fade" id="Beneficiary">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="Age" data-toggle="tab">Age</a></li>
<li><a data-="Gender" data-toggle="tab">Gender</a></li>
<li><a data-="Caste" data-toggle="tab">Caste</a></li>
<li><a data-="Religion" data-toggle="tab">Religion</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="Student">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="Age" data-toggle="tab">Age</a></li>
<li><a data-="Gender" data-toggle="tab">Gender</a></li>
<li><a data-="Caste" data-toggle="tab">Caste</a></li>
<li><a data-="Religion" data-toggle="tab">Religion</a></li>
<li><a data-="Qualification" data-toggle="tab">Qualification</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="Institute">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-="VTPs" data-toggle="tab">VTPs</a></li>
<li><a data-="ITI" data-toggle="tab">ITI</a></li>
<li><a data-="TPTC" data-toggle="tab">TPTC</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="Work">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-toggle="tab">Age</a></li>
<li><a data-toggle="tab">Gender</a></li>
<li><a data-toggle="tab">Caste</a></li>
<li><a data-toggle="tab">Religion</a></li>
</ul>
</div>
<div class="aspect-container tab-pane fade" id="Economy">
<ul class="nav nav-tabs tab-panel without-space">
<li class="active"><a data-toggle="tab">Age</a></li>
<li><a data-toggle="tab">Gender</a></li>
<li><a data-toggle="tab">Caste</a></li>
<li><a data-toggle="tab">Religion</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="max-height: 68vh; overflow: auto; padding: 0px !important;">
<div id="selectedFilters"></div>
<div class="panel-group" id="filters" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="static_filter">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseOne"
aria-expanded="false" aria-controls="collapseOne">District
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3" style="color: #195e83; font-weight: bold !important;">District
</span>
<input type="text" id="searchDist" class="form-control" placeholder="Search" aria-describedby="sizing-addon3">
</div>
<div class="btn-group btn-group-xs" role="group">
<button id="btnSelAll" type="button" onclick="toggleSearchOption(this,'district_list')" class="btn btn-primary">Unselect All</button>
</div>
<div class="district-list">
<table id="district_list"></table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: right; display: none;" id="btngroupfilters">
<span>
<button type="button" id="btnClearFilter" onclick="clearFilters(this)" class="btn btn-warning">Clear Filters</button>
</span>
<span>
<button type="button" id="btnApplyFilter" onclick="applyFilters(this)" class="btn btn-success">Apply Filters</button>
</span>
</div>
</div>
<div class="col-sm-9" id="mapChartTableCnt">
<div class="panel with-nav-tabs panel-default" style="margin-bottom: 0px !important;">
<div class="panel-body" id="mapChartTablecn" style="max-height: 68vh; min-height: 68vh; overflow: auto; padding: 0px !important;">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab_map">
<div id="map" style="height: 68vh; width: 100%">
</div>
</div>
<div class="tab-pane fade" id="tab_chart" style="position: relative; height: 68vh; width: 100%;">
<canvas id="analysisChart"></canvas>
</div>
<div class="tab-pane fade" id="tab_table">
<div id="example-table"></div>
</div>
</div>
</div>
<div class="panel-heading" style="padding: 0px !important;">
<div class="row">
<div class="col-sm-8">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_map" id="maptab" style="font-weight: bold !important; color: #195e83; display: flex;"
data-toggle="tab">
<span class="material-icons">map</span>
Map
</a></li>
<li><a href="#tab_chart"
style="font-weight: bold !important; color: #195e83; display: flex;"
data-toggle="tab">
<span class="material-icons">bar_chart</span>
Chart
</a></li>
<li><a href="#tab_table" style="font-weight: bold !important; color: #195e83; display: flex;" data-toggle="tab">
<span class="material-icons">table_view</span>
Table
</a></li>
<%-- <li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
<li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
</ul>
</li>--%>
</ul>
</div>
<div class="col-sm-4">
<ul class="nav nav-tabs" style="float: right;">
<li>
<a onclick="toggelFullscreen()" id="btnFullscreen" class="panelFullscreen">
<span><i class="material-icons">fullscreen</i></span>
FullScreen
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript 代码
select.multiselect({
nonSelectedText: 'Select Map Field',
includeSelectAllOption: false
});
/*************Create Additional Filters UI*************/
if (!isFiltersApply) {
if (window.additionalFilters) {
$.each(window.additionalFilters, (i, fd) => {
$('#' + fd.ContainerId).remove();
});
}
window.additionalFilters = {};
document.getElementById("btngroupfilters").style.display = "none";
}
let akeys = Object.keys(data);
akeys = akeys.sort();
let _div;
$.each(akeys, (k, key) => {
if (key != "Analysis" && key != "Query") {
if (!_div) {
_div = $('<div></div>');
$("#filters").append(_div);
}
let filter_data = data[key];
if (filter_data && filter_data.length > 0) {
let counter = k;
let panel_bd_cont = `<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon`+ counter
+ `" style="color: #195e83; font-weight: bold !important;">` + filter_data[0].Title + `
</span>
<input type="text" id="search`+ key + `" class="form-control" placeholder="Search"
aria-describedby="sizing-addon` + counter + `">
</div>
<div class="btn-group btn-group-xs" role="group">
<button id="btnSelAll`+ key + `" type="button" onclick="toggleSearchOption(this,'`
+ key + `_list')" class="btn btn-primary">Select All</button>
</div>
<div class="district-list">
<table id="`+ key + `_list"></table>
</div>`;
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
let div_tab = '<div class="panel panel-default" id="panel' + counter + '">' +
'<div class="panel-heading" role="tab" id="heading' + counter + '"><h4 class="panel-title">' +
'<a class="' + collapsedClass + '" id="panel-lebel' + counter
+ '" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse' + counter
+ '" ' + 'aria-expanded="' + ariaExpanded
+ '" aria-controls="collapse' + counter + '"> ' + filter_data[0].Title + ' </a></div>' +
'<div id="collapse' + counter + '" class="panel-collapse collapse '
+ expandedClass + '"role="tabpanel" aria-labelledby="heading' + counter + '">' +
'<div class="panel-body">' + panel_bd_cont + '</div></div>';
window.additionalFilters[key] = {
ContainerId: 'panel' + counter,
SearchInputId: 'search' + key,
TableId: key + '_list'
};
_div.append(div_tab);
let af = window.additionalFilters[key];
$('#' + af.TableId).jqListbox({
targetInput: false,
itemSelector: 'tr',
selectedClass: false,
initialValues: filter_data,
itemRenderer: function (item, pos, listbox) {
let value = $("#" + af.SearchInputId).val().toLowerCase().trim();
let show = !value || value == '' || item[item.FilterType].toLowerCase().indexOf(value) > -1;
var row = $('<tr style="display:' + (show ? "" : "none")
+ '"><td><label class="chk-container">' + item[item.FilterType]
+ '<input type="checkbox"><span class="checkmark"></span></label ></td></tr>');
if (listbox.isSelected(pos)) {
row.find('input').attr("checked", "checked");
row.addClass('selected');
}
return row;
},
onBeforeRender: function (listbox) { },
onAfterRender: function (listbox) { }
});
//$('#' + af.TableId).jqListbox().selectedWalk(addFiltersInDOM);
$('#' + af.SearchInputId).on('keyup', function (e) {
$('#' + af.TableId).jqListbox("render");
});
}
document.getElementById("btngroupfilters").style.display = "inline-block";
}
});
}
let _filtersDom = {};
function addFiltersInDOM(item, pos, domItem, listbox) {
let filter_dom = $("<span>" + item[item.FilterType] + "</span>");
let remove_link = $(' <i class="fa fa-pie-chart"></i>');
filter_dom.append(remove_link);
$("#selectedFilters").append(filter_dom);
if (!_filtersDom[item.FilterType]) {
_filtersDom[item.FilterType] = { Filter: [{ item: item, pos: pos, dom: filter_dom }], Parent: listbox };
} else {
_filtersDom[item.FilterType].Filter.push({ item: item, pos: pos, dom: filter_dom });
}
}
function applyFilters(evt) {
if (window.additionalFilters) {
let filters_params = [];
$.each(window.additionalFilters, (key, af) => {
let selItems = $('#' + af.TableId).jqListbox("getSelectedItems")
if (selItems && selItems.length > 0) {
let filters_value = '';
$.each(selItems, (i, selItem) => {
if (i == selItems.length - 1) {
filters_value += "'" + selItem[selItem.FilterType] + "'"
} else {
filters_value += "'" + selItem[selItem.FilterType] + "',"
}
});
filters_params.push({
ColumnName: selItems[0].FilterType,
Value: filters_value
});
}
});
getAnlysisData(filters_params);
}
}
function clearFilters() {
getAnlysisData();
}
window.toggleLoader = function (show, msg) {
$('.uiLoader').attr("style", "display:none;");
$('.uiLoader').preloader('remove');
if (show) {
$('.uiLoader').attr("style", "display:block;");
$('.uiLoader').preloader({
text: msg || "Please wait...",
percent: undefined,
duration: undefined
});
}
}
function resetUI() {
let isFullscreenEle = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
let elem = document.getElementById('mapChartTableCnt');
let btn = document.getElementById("btnFullscreen");
let pnl_body = $(elem).find("#mapChartTablecn");
if (!isFullscreenEle) {
pnl_body[0].style.minHeight = window.InitialCntrol.MinHeight;
pnl_body[0].style.maxHeight = window.InitialCntrol.MaxHeight;
$("#" + window.mapAnalysis.getTarget())[0].style.height = window.InitialCntrol.MapHeight;
window.analysischart.canvas.parentNode.style.height = window.InitialCntrol.ChartHeight;
window.InitialCntrol = undefined;
btn.innerHTML = "<span><i class='material-icons'>fullscreen</i></span>Fullscreen";
} else {
window.InitialCntrol = {
MinHeight: pnl_body[0].style.minHeight,
MaxHeight: pnl_body[0].style.maxHeight,
MapHeight: $("#map")[0].style.height,
ChartHeight: window.analysischart.canvas.parentNode.style.height
}
pnl_body[0].style.minHeight = "95vh";
pnl_body[0].style.maxHeight = "95vh";
$("#" + window.mapAnalysis.getTarget())[0].style.height = window.actionrow ? "calc(95vh - 50px)" : "95vh";
window.analysischart.canvas.parentNode.style.height = "95vh";
btn.innerHTML = "<span><i class='material-icons'>fullscreen_exit</i></span>Exit Fullscreen";
}
setTimeout(function () { window.mapAnalysis.updateSize(); }, 100);
}
$(document).ready(function () {
window.toggleLoader(true, "Please wait....");
initMap();
$('#district_list').jqListbox({
targetInput: false,
itemSelector: 'tr',
selectedClass: false,
itemRenderer: function (item, pos, listbox) {
let value = $("#searchDist").val().toLowerCase().trim();
let show = !value || value == '' || item.District.toLowerCase().indexOf(value) > -1;
var row = $('<tr style="display:' + (show ? "" : "none")
+ '"><td><label class="chk-container">' + item.District
+ '<input type="checkbox"><span class="checkmark"></span></label ></td></tr>');
if (listbox.isSelected(pos)) {
row.find('input').attr("checked", "checked");
row.addClass('selected');
}
return row;
},
onBeforeRender: function (listbox) { },
onAfterRender: function (listbox) {
window.toggleLoader(true, "Preparing map, chart & table...");
let selItems = $('#district_list').jqListbox("getSelectedItems");
clearData();
if (selItems && selItems.length > 0) {
let labels = [], _datasets = [];
let _sourcePolygon = new ol.source.Vector();
let _sourcePoint = new ol.source.Vector();
let _sourceTribalArea = new ol.source.Vector();
let _keys = Object.keys(selItems[0]);
let data_range = {};
$.each(_keys, (k, key) => {
let _v = [], _min, _max;
$.each(selItems, (i, d) => {
if (key != "District" && key != "Id" && key != "Geom" && key != "Query"
&& key != "Points" && key != "TribalArea") {
if (labels.indexOf(d.District) == -1) labels.push(d.District);
_v.push(d[key]);
_min = !_min || d[key] < _min ? d[key] : _min;
_max = !_max || d[key] > _max ? d[key] : _max;
}
if (_sourcePolygon.getFeatures().length != selItems.length) {
let polygon = new ol.geom.Polygon(JSON.parse(d.Geom).coordinates);
polygon.transform('EPSG:4326', 'EPSG:3857');
let feature = new ol.Feature({
geometry: polygon,
properties: d
});
_sourcePolygon.addFeature(feature);
if (d.Points) {
$.each(d.Points, (i, pt) => {
let ptf = new ol.Feature({
geometry: pt,
properties: d
});
_sourcePoint.addFeature(ptf);
});
}
if (d.TribalArea) {
$.each(d.TribalArea, (i, pol) => {
let feature = new ol.Feature({
geometry: pol,
properties: d
});
_sourceTribalArea.addFeature(feature);
});
}
}
});
if (key != "District" && key != "Id" && key != "Geom" && key != "Query"
&& key != "Points" && key != "TribalArea") {
data_range[key] = { Min: _min, Max: _max, Data: _v };
_datasets.push({
label: key,
backgroundColor: chroma.random(),
borderColor: chroma.random(),
data: _v
});
}
});
loadAnalysisMap(_sourcePolygon, _sourcePoint, _sourceTribalArea, data_range);
//refreshAddtionalLayers();
initChart(labels, _datasets);
initTable(selItems);
}
window.toggleLoader(false);
}
});
$('#searchDist').on('keyup', function (e) {
$('#district_list').jqListbox("render");
});
$('#data_tabs')
.find(".aspect-container")
.find(".nav-tabs").find('a').click(() => {
getAnlysisData();
});
document.addEventListener("fullscreenchange", function () {
resetUI();
});
document.addEventListener("mozfullscreenchange", function () {
resetUI();
});
document.addEventListener("webkitfullscreenchange", function () {
resetUI();
});
document.addEventListener("msfullscreenchange", function () {
resetUI();
});
loadDistricts();
});