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

Question

我有3个下拉列表，其中包含用于根据数据表的选择过滤数据表的表达式，例如，

    <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>

现在，用户可以从下拉列表中以任何类型的组合来选择值，例如dropbox1-选择的值+ dropbox2-选择的值或dropbox 1-仅选择的值或所有3个dropbox被选择的等等，等等。 dataTable应该仅根据下拉列表中的选定值显示元素。

任何人都可以告诉我一些有效的方法来比较使用jQuery或Javascript的所有这些可能的组合，并将基于给定过滤条件的查询字符串传递给服务器，并相应地更改数据表。

JsFiddle链接： https ://jsfiddle.net/zapkingdude/cowfwerj/

Answer 1

为每个dropdownList提供一个ID，然后使用以下命令获取特定下拉列表的值：

值= document.getElementById（“投递箱ID”）。val;

然后通过制作jSON数据向服务器发出请求。

在下拉选择更改时调用函数

onchange =“功能（）”