title: Set default value for select field jquery filter data attribute
body: <pre><code>filterJobs: function()
  {
      var team = $('#selectOne').val();
      var specialty = $('#selectTwo').val();
      var level = $('#selectThree').val();
      //var defSelectTeam=
  
      $('.jobs').hide()
              .filter('[data-team="' + team + '"][data-specialization="' + specialty + '"][data-level="' + level + '"]')
              .show();
      var newNumJobs = $('.jobs:visible').length;
      $('table:visible:odd').css({'background-color': ' #F1F1F1'});
      $('table:visible:even').css({'background-color': '#FFFFFF'});
      if (newNumJobs &lt;= this.pageSize)
      {
          $("#dvJobs span").text("Showing " + newNumJobs + " of " + newNumJobs + " jobs");
      }
      else
      {
          $("#dvJobs span").text("Showing " + this.pageSize + " of " + newNumJobs + " jobs");
      }
  
      this.buildPaginator(newNumJobs);
  },
  </code></pre>
  
  <p>Hi guys any clue how to modify this filtering function for select filtering right now it works, I need to set a default value that shows all options before the filtering on change? I just need to be pointed in the right general direction, I'm crap at js, but trying to improve. Thanks in advance,
   The html is this//////, it works by taking the data attributes off a table, that part works fine, just need to set a default value, I was thinking of setting a couple of data attrs, but that seems messy. or setting an if block that checks the value, if its 'select one' show all. Sorry for rambling on.</p>
  
  <pre><code>&lt;select id="selectOne"&gt;
      &lt;option value="Select One"&gt;Select One &lt;/option&gt;
      &lt;option value="Engineering"&gt;Engineering &lt;/option&gt;
      &lt;option value="SoftwareDevelopment" &gt;Software Development&lt;/option&gt;
      &lt;option value="HumanResources" &gt;Human Resources&lt;/option&gt;
      &lt;option value="MarkettingAndSales"&gt;Marketting and Sales&lt;/option&gt;
      &lt;option value="Administrative"&gt;Administrative&lt;/option&gt;
      &lt;option value="Others"&gt;Others&lt;/option&gt;
  &lt;/select&gt;
  &lt;label&gt;Specialty:&lt;/label&gt;
  &lt;select id="selectTwo"&gt;
      &lt;option class="Select One" &gt;Select One &lt;/option&gt;
      &lt;option class="MarkettingAndSales" value="Sales"&gt;Sales &lt;/option&gt;
      &lt;option class="HumanResources" value="Recruitment"&gt;Recruitment &lt;/option&gt;
      &lt;option class="Administrative" value="OfficeGeneral"&gt;Office General &lt;/option&gt;
      &lt;option class="Engineering SoftwareDevelopment" value="WebDevelopment"&gt;Web Development &lt;/option&gt;
      &lt;option  class="SoftwareDevelopment" value="ApplicationDevelopment"&gt;Application Development &lt;/option&gt;
      &lt;option class="SoftwareDevelopment" value="UIUXDesign"&gt;UI/UX Design&lt;/option&gt;
      &lt;option class="Others" value="ScientificResearch"&gt;Scientific Research&lt;/option&gt;
      &lt;option  class="Engineering Others" value="ComputerHardwareNetworking"&gt;Computer Hardware  Networking&lt;/option&gt;
      &lt;option  class="Others" value="Others"&gt;Others&lt;/option&gt;
  &lt;/select&gt;
  &lt;label&gt;Level:&lt;/label&gt;
  &lt;select id="selectThree"&gt;
      &lt;option&gt;Senior&lt;/option&gt;
      &lt;option&gt;Intermediate&lt;/option&gt;
      &lt;option&gt;Junior&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Thanks in advance.
  UPDATE: I modified it a bit to show the pagination, but I guess I am using the val function wrong in the if/else block?</p>
  
  <pre><code>filterJobs: function()
  {
      var team = $('#selectOne').val();
      var specialty = $('#selectTwo').val();
      var level = $('#selectThree').val();
      var newNumJobs = $('.jobs:visible').length;
      if (team === 'SelectOne' &amp;&amp; specialty === 'SelectOne')
      {
          $('.jobs').show();
      }
      else
      {
          $('.jobs').hide()
                  .filter('[data-team="' + team + '"][data-specialization="' + specialty + '"][data-level="' + level + '"]')
                  .show();
  
          $('table:visible:odd').css({'background-color': ' #F1F1F1'});
          $('table:visible:even').css({'background-color': '#FFFFFF'});
      }
      if (newNumJobs &lt;= this.pageSize)
      {
          $("#dvJobs span").text("Showing " + newNumJobs + " of " + newNumJobs + " jobs");
      }
      else
      {
          $("#dvJobs span").text("Showing " + this.pageSize + " of " + newNumJobs + " jobs");
      }
  
  
      this.buildPaginator(newNumJobs);
  }
  </code></pre>
  
  <p>For clarification, I've added the tabe being filtered, hope that helps understand my question.</p>
  
  <pre><code>&lt;table data-team="&lt;?php print $name['team']; ?&gt;" data-specialization="&lt;?php print $name['speciality']; ?&gt;" data-level="&lt;?php print $name['level']; ?&gt;" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"&gt;&lt;tr&gt;&lt;td&gt;
      &lt;tr&gt;&lt;td colspan="4"&gt;&lt;strong&gt;Research Assistant&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="100"&gt;Location : &lt;/td&gt;
          &lt;td colspan="3"&gt;Madrid&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; Job Code : &lt;/td&gt;
          &lt;td width="460"&gt;6767676&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>