如何根据下拉列表中的选定值显示数据？

Question

与sharepoint合作创建一个下拉列表，以显示与所选主题相对应的文档。这五个主题是废物管理，水/废水/废水，对土壤或地下水的环境释放，设施和设备的去污以及可持续性。使用sphagetti代码完成它。使用SPServices，Jquery，JS和HTML。

不完整的代码是$（'＃topicSelect'）。change（function（）。我不太确定如何使用过滤器函数并将其传递给用户，并在其中显示与该区域对应的文档docs下拉列表。我认为该部分中的代码完全错误。

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: "<Query><Where><Or><Or><Or><Or><Or><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Environment, Waste &amp; Sustainability</Value></Eq><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Waste Management</Value></Eq></Or><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Water/Wastewater/Effluent</Value></Eq></Or><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Environment Release to Soil or Groundwater</Value></Eq></Or><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Facility &amp; Equipment Decontamination</Value></Eq></Or><Eq><FieldRef Name='Topic_x0020_Areas'/><Value Type='DataType'>Sustainability</Value></Eq></Or></Where><OrderBy><FieldRef Name='Document_x0020_Type'/><FieldRef Name='Title'/></OrderBy></Query>",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Topic_x0020_Areas' /><FieldRef Name='Region' /><FieldRef Name='Document_x0020_Type' /><FieldRef Name='LinkFilename' /><FieldRef Name='Business_x0020_Area' /></ViewFields>",
    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 += "<tr class='datarow'><td><a target='_blank' href='/sites/rd_ehs/EH3S%20Documents/" + this.filename + "'>" + this.title + "</a></td></tr>";
        $("#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 = "<strong>" + filterObj.topic + "</strong><p>" + topicObj[filterObj.topic] + "</p>";
      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 & Equipment Decontamination') {
          filter(filterObj);
        }
        if (filterObj.topic == 'Facility & 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 > td:first-child > 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 && 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>label {
  display: block;
}

.tableSearch {
  float: right;
  margin-right: 10px;
  position: relative;
  bottom: 20px;
  color: #544f40;
  z-index: 10;
  height: 0px;
  width: 0px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js'></script>
<div class="filterCol">
  <label for="topicSelect">Topic Area</label>
  <select id="topicSelect">
    <option selected="" disabled="">Topic Area</option>
    <option>Waste Management</option>
    <option>Water/Wastewater/Effluent</option>
    <option>Environment Release to Soil or Groundwater</option>
    <option>Facility & Equipment Decontamination</option>
    <option>Sustainability</option>
  </select>
</div>
<div id='filterTool'>
  <div>
    <table id='resultTable'>
      <tr id='resultTableHeader'>
        <th>
          <div style="margin-top:0px!important"><input type="text" placeholder="Search" id='searchInput' /><i style="display:block" class="tableSearch fa fa-search fa-rotate-90" aria-hidden="true"></i></div>
        </th>
      </tr>
    </table>
    <p id="noResults" style="display:none"><strong>No results found</strong></p>
  </div>
</div>