title: How to show/hide select when another select is selected
body: <p>i'm so confused on how to hide and show a select element when another select is selected using jQuery. Here are my HTML code :</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Kategori Buku&lt;/td&gt;
      &lt;td&gt;
          &lt;select class="kategori-buku" name="kategori_buku"&gt;
              &lt;option value=""&gt;&lt;i&gt;Pilih Kategori Buku&lt;/i&gt;&lt;/option&gt;
              &lt;option value="buku_pelajaran"&gt;Buku Pelajaran&lt;/option&gt;
              &lt;option value="buku_umum"&gt;Buku Umum&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="subkategori-buku-pelajaran"&gt;
      &lt;td&gt;Subkategori Buku&lt;/td&gt;
      &lt;td&gt;
         &lt;select class="subkategori-buku" name="subkategori_buku"&gt;
              &lt;option value=""&gt;&lt;i&gt;Pilih Subkategori Buku&lt;/i&gt;&lt;/option&gt;
              &lt;option value="bahasa_indonesia"&gt;Bahasa Indonesia&lt;/option&gt;
              &lt;option value="biologi"&gt;Biologi&lt;/option&gt;
              &lt;option value="ekonomi"&gt;Ekonomi&lt;/option&gt;
              &lt;option value="fisika"&gt;Fisika&lt;/option&gt;
              &lt;option value="geografi"&gt;Geografi&lt;/option&gt;
              &lt;option value="kimia"&gt;Kimia&lt;/option&gt;
              &lt;option value="matematika"&gt;Matematika&lt;/option&gt;
              &lt;option value="sejarah"&gt;Sejarah&lt;/option&gt;
              &lt;option value="tik"&gt;TIK&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="subkategori-buku-umum"&gt;
      &lt;td&gt;Subkategori Buku&lt;/td&gt;
      &lt;td&gt;
          &lt;select class="subkategori-buku" name="subkategori_buku"&gt;
              &lt;option value=""&gt;&lt;i&gt;Pilih Subkategori Buku&lt;/i&gt;&lt;/option&gt;
              &lt;option value="desain"&gt;Desain&lt;/option&gt;
              &lt;option value="pemrograman"&gt;Pemrograman&lt;/option&gt;
              &lt;option value="sistem_operasi"&gt;Sistem Operasi&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Based on my code above, i want to :</p>
  
  <ol>
  <li>When <strong>select.kategori-buku</strong> isn't selected yet, <strong>.subkategori-buku-pelajaran</strong> table row and <strong>.subkategori-buku-umum</strong> table row will be hidden.</li>
  <li>When option with value '<em>buku_pelajaran</em>' is selected in <strong>select.kategori-buku</strong>, the <strong>.subkategori-buku-pelajaran</strong> table row should be <strong><em>showed up</em></strong> and '<strong>.subkategori-buku-umum</strong>' table row <strong><em>should be hidden</em></strong>.</li>
  <li>When option with value '<em>buku_umum</em>' is selected in <strong>select.kategori-buku</strong>', the <strong>.subkategori-buku-umum</strong> table row should be <strong><em>showed up</em></strong> and '<strong>.subkategori-buku-pelajaran</strong>' table row <strong><em>should be hidden</em></strong>.</li>
  </ol>
  
  <p>I've used </p>
  
  <blockquote>
    <p>.val()</p>
  </blockquote>
  
  <p>method using jQuery to get the <strong>.kategori-buku</strong>'s value then i used it to show/hide the <strong>.subkategori</strong>'s, but i'm fail. I appreciate any answer and help from you guys. Thank you before :)</p>
  
  <p><strong>UPDATE</strong></p>
  
  <hr>
  
  <p>These are my jQuery code :</p>
  
  <pre><code>$('.subkategori-buku-pelajaran').hide();
  $('.subkategori-buku-umum').hide();
  
      var kategoriBuku = $('select.kategori-buku').val();
  
      if(kategoriBuku == '0'){
              $('.subkategori-buku-pelajaran').hide();
              $('.subkategori-buku-umum').hide();
      }
      elseif(kategoriBuku == 'buku_umum') {
          $('.subkategori-buku-umum').show();
      }
      elseif(kategoriBuku == 'buku_pelajaran') {
          $('.subkategori-buku-pelajaran').show();
      }
  </code></pre>
  
  <p>I think my code almost similar to PacMan's code, the diferrence are i don't use </p>
  
  <blockquote>
    <p>$('select.kategori-buku').change(function(){});</p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>var keyword</p>
  </blockquote>
  
  <p>Anyway, big thanks for Kris and PacMan. I really appreciate your helps :D</p>