Как показать данные на основе выбранного значения в раскрывающемся списке?

Как показать данные на основе выбранного значения в раскрывающемся списке?

Работа с sharepoint для создания выпадающего списка для отображения документов, соответствующих выбранной теме. Пятью темами являются Управление отходами, Вода / Сточные воды / Сточные воды, Выброс в почву или грунтовые воды из окружающей среды, Обеззараживание оборудования и оборудования и Устойчивость Работа с кодом sphagetti для его завершения. Использование SPServices, Jquery, JS и HTML.

Неполный код — это $ (‘# topicSelect’). Change (function (). Я не совсем уверен, как использовать функцию фильтра, передать ее и показать документы со словом, которые соответствуют области в раскрывающемся списке. Я считаю, что код в этом разделе совершенно не так.

 var url = "/sites/rd_ehs"; var listName = "EH3S Documents" var dataObj = []; var filterObj = {}; var topicObj = {}; var tempObj = {}; $(document).ready(function() { //Getting documents and appending to table $().SPServices({ url: url, operation: "GetListItems", async: false, listName: listName, CAMLQuery: "{amp}lt;Query{amp}gt;{amp}lt;Where{amp}gt;{amp}lt;Or{amp}gt;{amp}lt;Or{amp}gt;{amp}lt;Or{amp}gt;{amp}lt;Or{amp}gt;{amp}lt;Or{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Environment, Waste {amp}amp;amp; Sustainability{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Waste Management{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;/Or{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Water/Wastewater/Effluent{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;/Or{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Environment Release to Soil or Groundwater{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;/Or{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Facility {amp}amp;amp; Equipment Decontamination{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;/Or{amp}gt;{amp}lt;Eq{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas'/{amp}gt;{amp}lt;Value Type='DataType'{amp}gt;Sustainability{amp}lt;/Value{amp}gt;{amp}lt;/Eq{amp}gt;{amp}lt;/Or{amp}gt;{amp}lt;/Where{amp}gt;{amp}lt;OrderBy{amp}gt;{amp}lt;FieldRef Name='Document_x0020_Type'/{amp}gt;{amp}lt;FieldRef Name='Title'/{amp}gt;{amp}lt;/OrderBy{amp}gt;{amp}lt;/Query{amp}gt;", CAMLViewFields: "{amp}lt;ViewFields{amp}gt;{amp}lt;FieldRef Name='Title' /{amp}gt;{amp}lt;FieldRef Name='Topic_x0020_Areas' /{amp}gt;{amp}lt;FieldRef Name='Region' /{amp}gt;{amp}lt;FieldRef Name='Document_x0020_Type' /{amp}gt;{amp}lt;FieldRef Name='LinkFilename' /{amp}gt;{amp}lt;FieldRef Name='Business_x0020_Area' /{amp}gt;{amp}lt;/ViewFields{amp}gt;", completefunc: function(xData, Status) { console.log("Status:"   Status) console.log(xData) $(xData.responseXML).SPFilterNode("z:row").each(function() { tempObj = {}; tempObj.title = $(this).attr("ows_Title"); tempObj.filename = $(this).attr("ows_LinkFilename"); if ($(this).attr("ows_Topic_x0020_Areas") != undefined) { tempObj.topicAreas = $.trim($(this).attr("ows_Topic_x0020_Areas").replace(/;#/g, ", ")); tempObj.topicAreas = tempObj.topicAreas.substr(2, tempObj.topicAreas.length - 3); } else { tempObj.topicAreas = $(this).attr("ows_Topic_x0020_Areas"); } if ($(this).attr("ows_Region") != undefined) { tempObj.region = $.trim($(this).attr("ows_Region").replace(/;#/g, ", ")); tempObj.region = tempObj.region.substr(2, tempObj.region.length - 3); } else { tempObj.topicAreas = $(this).attr("ows_Region"); } if ($(this).attr("ows_Document_x0020_Type") != undefined) { tempObj.docType = $(this).attr("ows_Document_x0020_Type").substr(2); } if ($(this).attr("ows_Business_x0020_Area") != undefined) { tempObj.businessArea = $(this).attr("ows_Business_x0020_Area"); dataObj.push(tempObj); } }); //Build out results table $(dataObj).each(function(i, el) { var htmlOutput = ""; htmlOutput  = "{amp}lt;tr class='datarow'{amp}gt;{amp}lt;td{amp}gt;{amp}lt;a target='_blank' href='/sites/rd_ehs/EH3S Documents/"   this.filename   "'{amp}gt;"   this.title   "{amp}lt;/a{amp}gt;{amp}lt;/td{amp}gt;{amp}lt;/tr{amp}gt;"; $("#resultTable").append(htmlOutput); }); } }); //Even odd coloring addCss(); //Dropdown selectors $('#regionSelect').change(function() { filterObj.region = this.value; filter(filterObj); $("#searchInput").val(""); }); //Dropdown selectors $('#topicSelect').change(function() { filterObj.topic = this.value; console.log(filterObj); var showtopicHTML = ""; if (filterObj.topic != "View All") { showtopicHTML = "{amp}lt;strong{amp}gt;"   filterObj.topic   "{amp}lt;/strong{amp}gt;{amp}lt;p{amp}gt;"   topicObj[filterObj.topic]   "{amp}lt;/p{amp}gt;"; if (filterObj.topic == "Waste Management") { filter(filterObj) if (filterObj.topic == 'Water/Wastewater/Effluent') { filter(filterObj); } if (filterObj.topic == 'Environment Release to Soil or Groundwater') { filter(filterObj); } if (filterObj.topic == 'Facility {amp}amp; Equipment Decontamination') { filter(filterObj); } if (filterObj.topic == 'Facility {amp}amp; Equipment Decontamination') { filter(filterObj); } } } }) //Remove magnifing glass icon on typing $("#searchInput").on("keydown", function() { $('.tableSearch').hide(); }); //Search title strings w/ searchbox $("#searchInput").on("keyup", delay(function(e) { var value = $(this).val().toLowerCase(); filter(filterObj); if (value == "") { $('.tableSearch').show(); } else { $(".datarow {amp}gt; td:first-child {amp}gt; a").each(function() { if ($(this).text().toLowerCase().indexOf(value) == -1) { $(this).parent().parent().hide(); } }); } $('.odd').removeClass('odd'); addCss(); }, 250)); //Reset search to dropdown settings if searchbox is empty, specifically by x button click $("#searchInput").on("input", delay(function(e) { var value = $(this).val().toLowerCase(); if (value == "") { filter(filterObj); $('.tableSearch').show(); } }, 250)); }); //Dropdown Filter logic function filter(filterObj) { $('.datarow').hide(); var filterString = "tr"; if (filterObj.region == "View All") { } else if (filterObj.region != undefined) { filterString  = "[data-region*='"   filterObj.region   "']"; } if (filterObj.topic == "View All") { } else if (filterObj.topic != undefined) { filterString  = "[data-topic*='"   filterObj.topic   "']"; if (filterObj.topic == 'Management') { $("[data-topic*='management']").show(); } } if (filterObj.docType == "View All") { } else if (filterObj.docType != undefined) { filterString  = "[data-docType*='"   filterObj.docType   "']"; } if (filterObj.businessArea == "View All") { } else if (filterObj.businessArea != undefined) { filterString  = "[data-BA*='"   filterObj.businessArea   "']"; } $(filterString).show(); $('.odd').removeClass('odd') addCss(); } //Reapply css after changes function addCss() { $('#noResults').css("display", "none"); $('#resultTable').css("display", "table"); if ($('.datarow:visible').length == 0) { $('#noResults').css("display", "block"); } else { $('.datarow:visible').each(function(i, el) { if (i != 0 {amp}amp;{amp}amp; i % 2 == 1) { $(this).addClass('odd') $(this).css("background-color", "#d5d1ce!important"); } else { $(this).removeClass('odd') $(this).css("background-color", "#fff!important"); } }); } } //Delay for keyups so it fires less often increasing performance function delay(callback, ms) { var timer = 0; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { callback.apply(context, args); }, ms || 0); }; } 
 #resultTable { width: 100%; } #resultTable th { text-align: left; padding: 10px 5px; } #resultTable td { padding: 5px 5px; } .odd { background-color: #d5d1ce!important; } #resultTableHeader { background-color: #008a00; color: #fff; } #dropdowns { margin-bottom: 10px!important; } .filterCol { display: inline-block; } .filterCol{amp}gt;label { display: block; } .tableSearch { float: right; margin-right: 10px; position: relative; bottom: 20px; color: #544f40; z-index: 10; height: 0px; width: 0px; display: block; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js'{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="filterCol"{amp}gt; {amp}lt;label for="topicSelect"{amp}gt;Topic Area{amp}lt;/label{amp}gt; {amp}lt;select id="topicSelect"{amp}gt; {amp}lt;option selected="" disabled=""{amp}gt;Topic Area{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Waste Management{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Water/Wastewater/Effluent{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Environment Release to Soil or Groundwater{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Facility {amp}amp; Equipment Decontamination{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Sustainability{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id='filterTool'{amp}gt; {amp}lt;div{amp}gt; {amp}lt;table id='resultTable'{amp}gt; {amp}lt;tr id='resultTableHeader'{amp}gt; {amp}lt;th{amp}gt; {amp}lt;div style="margin-top:0px!important"{amp}gt;{amp}lt;input type="text" placeholder="Search" id='searchInput' /{amp}gt;{amp}lt;i style="display:block" class="tableSearch fa fa-search fa-rotate-90" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;p id="noResults" style="display:none"{amp}gt;{amp}lt;strong{amp}gt;No results found{amp}lt;/strong{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector