mercredi 29 juin 2016

How to compare the multiple dropdown box values using Javascript/jQuery?

I am having 3 dropdown list which contains the expressions for filtering the datatables based on their selection, for 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>

Now, the user can select the values from the dropdown in any type of combinations, like, dropbox1 - selected value + dropbox2 - selected value or dropbox 1 - selected value only or all 3 dropboxes selected etc, etc.... then the #dataTable should only show the elements as per the selected values in the dropdown.

Can any one please tell me some effective way to compare all these possible combinations using jQuery or Javascript and pass the query string based on given filter condition to the server and change the datatable accordingly.

JsFiddle link: https://jsfiddle.net/




Aucun commentaire:

Enregistrer un commentaire