如何使用Javascript / jQuery比较多个下拉框的值？

Question

I am having 3 dropdown list which contains the expressions for filtering the datatables based on their selection, for example,

    <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>
<script>
$('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
    }
  });

});

</script>

Now, the user can select the values from the dropdown in any type of combinations, like, dropbox1 - selected value + dropbox2 - selected value or dropbox 1 - selected value only or all 3 dropboxes selected etc, etc.... then the #dataTable should only show the elements as per the selected values in the dropdown.

Can any one please tell me some effective way to compare all these possible combinations using jQuery or Javascript and pass the query string based on given filter condition to the server and change the datatable accordingly.

JsFiddle link: https://jsfiddle.net/zapkingdude/cowfwerj/

Answer 1

Provide an id for each of the dropdownList and then get the value at the particular dropdown using:

value = document.getElementById("id-of-the-dropbox").val;

Then make a request to the server by making an jSON data.

call a function on change of the dropdown selection as

onchange = "function ()"