JSFiddle - React, Tailwind, and code Playground

by Prasanna Sivakumar

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<select class="AssetSearch" title="ASSET_TYPE">
  <option value="0">--Select Asset Type--</option>
  <option value="PC">PC</option>
  <option value="Workstation">Workstation</option>
</select>

<select class="AssetSearch" title="Location_code">
  <option value="0">--Select Location--</option>
  <option value="Bldg 1">Bldg 1</option>
  <option value="Bldg A1">Bldg A1</option>
</select>

<select class="AssetSearch" title="FLOOR_NO">
  <option value="0">--Select Floor No--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="btnSearchAsset" value="search">Search
</button>

<table id="dataTable">
  <thead>
    <tr>
      <th>Asset Type</th>
      <th>Location</th>
      <th>Floor No</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Printer</td>
      <td>Bldg 1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Telephone</td>
      <td>Bldg A1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Telephone</td>
      <td>Bldg A1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Telephone</td>
      <td>Bldg A1</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Printer</td>
      <td>Bldg A1</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

JavaScript

$('document').ready(function() {

  var assetTypeSel, locSel, floorNoSel;
  var queryDBStr;

  $("select[title = 'Location_code']").on("change", function() {
    $(this).attr("selected", "selected");
    //alert($(this).val());
    locSel = $(this).val();
  });

  $("select[title = 'ASSET_TYPE']").on("change", function() {
    assetTypeSel = $(this).val();
  });

  $("select[title = 'FLOOR_NO']").on("change", function() {
    floorNoSel = $(this).val();
  });

  $(".btnSearchAsset").on("click", function(evt) {
    var selVal = [];
    if ((assetTypeSel == 0) && (locSel == 0) && (floorNoSel == 0)) {
      alert("Please Select atleast one option from any of the dropboxes");
    } else {
      $.each($("select.AssetSearch").children("option").filter(":selected"), function() {
        selVal.push($(this).val());
      });

      for (var i = 0; i < selVal.length; i++) {

        if (selVal[i] != 0) {

          queryDBStr = "b.ASSET_TYPE = #" + selVal[0] + "# AND c.LOCATION_CODE = #" + selVal[1] + "# AND b.FLOOR_NO = " + selVal[2] + " ";
          alert(queryDBStr);
        } else if ((selVal[0] == 0) && ((selVal[1] != 0) && (selVal[2] != 0))) {
          queryDBStr = "c.LOCATION_CODE = #" + selVal[1] + "# AND b.FLOOR_NO = " + selVal[2] + " ";
          alert(queryDBStr);
        } else if ((selVal[0] != 0) && ((selVal[1] != 0) && (selVal[2] == 0))) {
          queryDBStr = "b.ASSET_TYPE = #" + selVal[0] + "# AND c.LOCATION_CODE = " + selVal[1] + " ";
        }
        //Further other else if ladders to follow :( - # codes before and after the double quotes(") symbol is to replace it with single quotes (') in the webmethod
      }
      AssetReportFill(queryDBStr); //Function for ajax call and change the table according to the filters from the db
    }
  });

});