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，然后使用以下命令获取特定下拉列表中的值：

value = document.getElementById（“id-of-the-dropbox”）。val;

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

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

onchange =“function（）”

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

1 个答案: