如何使用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比較多個下拉框的值？

回答

相關問題