title: Hide and Show a row of table based on the value of a dropdown - jquery
body: <ol>
  <li>Now the Table is dynamic so  many rows can come but drop down is static </li>
  <li>drop down 2nd and 3rd value Apple and Orange can only come in the tables 2nd column And dropdown 4th and 5 th value "Fresh" and "Rotten" can only come in the 4th column </li>
  <li>all the code should be in the function viewChange ()</li>
  </ol>
  
  <p>Now when <code>Apple</code> is selected all the rows with 2nd column value with apple will show and so on.</p>
  
  <p>selection - All will show the whole table again </p>
  
  <p>How do I write the function?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    function ViewChange()
  {
  
  var selectedViewName = $('#dropDown :selected').val();
      switch (selectedViewName)
      {
  
         
  
          case("1"):
              selectedViewName="ALL";
              break;
          case("2"):
              selectedViewName = "Apple";
              break;
          case("3"):
              selectedViewName = "Orange";
              break;
          case("4"):
              selectedViewName = "Fresh";
              break
          case("5"):
              selectedViewName = "Rotten";
              break
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="dropDown" onchange="ViewChange()"&gt;&lt;option value="1"&gt;All&lt;/option&gt;
    &lt;option value="2"&gt;Apple&lt;/option&gt;
    &lt;option value="3"&gt;Orange&lt;/option&gt;
    &lt;option value="4"&gt;Fresh&lt;/option&gt;
    &lt;option value="5"&gt;Rotten&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table id="tableID"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Fruit type&lt;/th&gt;
        &lt;th&gt;place&lt;/th&gt;
        &lt;th&gt;state&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;salim groceries&lt;/td&gt;
        &lt;td&gt;apple&lt;/td&gt;
        &lt;td&gt;nagpur&lt;/td&gt;
        &lt;td&gt;fresh&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;monalisa groceries&lt;/td&gt;
        &lt;td&gt;Apple&lt;/td&gt;
        &lt;td&gt;Belapur&lt;/td&gt;
        &lt;td&gt;Rotten&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;taj groceries&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;Nasik&lt;/td&gt;
        &lt;td&gt;Fresh&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;suraj groceries&lt;/td&gt;
        &lt;td&gt;Orange&lt;/td&gt;
        &lt;td&gt;Goa&lt;/td&gt;
        &lt;td&gt;Rotten&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please check out this fiddle <a href="https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/" rel="nofollow noreferrer">https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/</a></p>