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

我有包含用于基于它们的选择过滤所述数据表的表达式3下拉列表中，例如，如何使用Javascript/jQuery比较多个下拉框的值？

<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 dropboxes选择等等，然后#dataTable应该只显示下拉列表中选定的值的元素。

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

的jsfiddle链路：https://jsfiddle.net/zapkingdude/cowfwerj/

来源

2016-06-29 Zapkingdude

这不是免费的编码服务......你需要证明你有什么到目前为止已经试过和你在那里被卡住了.. –

我很抱歉如果我的问题让你觉得我要求免费的编码服务，我想知道一些比我的方法更好的方法，如果有的话，如果你看到jfiddle链接，你可以看到我的目前的工作。 – Zapkingdude

您是否从下拉列表中选择的值生成sql，并将其直接传递给db？如果是这样的话，这听起来像是一个很大的SQL注入风险。仅将值传递给服务器，并使用参数化的sql-query生成sql。 – Esko

提供ID对于每个DROPDOWNLIST的，然后使用在特定的下拉得到的值：

值=的document.getElementById（ “ID-的最保管箱” ）.VAL;

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

呼叫作为

的下拉选择变化的函数的onchange =“功能（）”

来源

2016-06-29 09:36:27

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

回答

相关问题