How to compare the multiple dropdown box values using Javascript/jQuery? -
i having 3 dropdown list contains expressions filtering datatables based on selection, 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 1 option of dropboxes"); } else { $.each($("select.assetsearch").children("option").filter(":selected"), function() { selval.push($(this).val()); }); (var = 0; < selval.length; i++) { if (selval[i] != 0) { querydbstr = "b.asset_type = #" + selval[0] + "# , c.location_code = #" + selval[1] + "# , b.floor_no = " + selval[2] + " "; alert(querydbstr); } else if ((selval[0] == 0) && ((selval[1] != 0) && (selval[2] != 0))) { querydbstr = "c.location_code = #" + selval[1] + "# , b.floor_no = " + selval[2] + " "; alert(querydbstr); } else if ((selval[0] != 0) && ((selval[1] != 0) && (selval[2] == 0))) { querydbstr = "b.asset_type = #" + selval[0] + "# , c.location_code = " + selval[1] + " "; } //further other else if ladders follow :( - # codes before , after double quotes(") symbol replace single quotes (') in webmethod } assetreportfill(querydbstr); //function ajax call , change table according filters db } }); }); </script> now, user can select values dropdown in type of combinations, like, dropbox1 - selected value + dropbox2 - selected value or dropbox 1 - selected value or 3 dropboxes selected etc, etc.... #datatable should show elements per selected values in dropdown.
can 1 please tell me effective way compare these possible combinations using jquery or javascript , pass query string based on given filter condition server , change datatable accordingly.
jsfiddle link: https://jsfiddle.net/zapkingdude/cowfwerj/
provide id each of dropdownlist , value @ particular dropdown using:
value = document.getelementbyid("id-of-the-dropbox").val;
then make request server making json data.
call function on change of dropdown selection as
onchange = "function ()"
Comments
Post a Comment