別の選択が選択されたときに表示/非表示にする方法

Question

jQueryを使用して別の選択が選択されたときに選択要素を非表示にする方法が混乱しています。ここに私のHTMLコードは、次のとおりです。上記の私のコードに基づいて

<tr> 
    <td>Kategori Buku</td> 
    <td> 
     <select class="kategori-buku" name="kategori_buku"> 
      <option value=""><i>Pilih Kategori Buku</i></option> 
      <option value="buku_pelajaran">Buku Pelajaran</option> 
      <option value="buku_umum">Buku Umum</option> 
     </select> 
    </td> 
</tr> 
<tr class="subkategori-buku-pelajaran"> 
    <td>Subkategori Buku</td> 
    <td> 
     <select class="subkategori-buku" name="subkategori_buku"> 
      <option value=""><i>Pilih Subkategori Buku</i></option> 
      <option value="bahasa_indonesia">Bahasa Indonesia</option> 
      <option value="biologi">Biologi</option> 
      <option value="ekonomi">Ekonomi</option> 
      <option value="fisika">Fisika</option> 
      <option value="geografi">Geografi</option> 
      <option value="kimia">Kimia</option> 
      <option value="matematika">Matematika</option> 
      <option value="sejarah">Sejarah</option> 
      <option value="tik">TIK</option> 
     </select> 
    </td> 
</tr> 
<tr class="subkategori-buku-umum"> 
    <td>Subkategori Buku</td> 
    <td> 
     <select class="subkategori-buku" name="subkategori_buku"> 
      <option value=""><i>Pilih Subkategori Buku</i></option> 
      <option value="desain">Desain</option> 
      <option value="pemrograman">Pemrograman</option> 
      <option value="sistem_operasi">Sistem Operasi</option> 
     </select> 
    </td> 
</tr> 

、私がしたい：

1. select.kategori-bukuがまだ選択されていない場合は、.subkategori-buku-pelajaranは、テーブル行と。サブカテゴリー - buku-umumテーブル行が非表示になります。
2. ' buku_pelajaran ' の値を持つオプションがselect.kategori-bukuに選択された場合、.subkategori-buku-pelajaranテーブル行ががに現れなければならないと「.subkategori-buku- umum 'テーブル行は非表示にする必要があります。 .subkategori-buku '.subkategori-buku-umumテーブル行ががとを示しなければならない、' 'buku_umum' の値を持つオプションがselect.kategori-bukuで選択され
3. -pelajaran 'テーブル行は非表示にする必要があります私は.kategori-bukuの値を取得するためにjQueryを使用する方法が、私は表示/非表示するためにそれを使用

   .val（）

   を使用しました

。サブカテゴリー 'sだが失敗する。私はあなたに何か答えて助けてくれてありがとう。私が使用していないです

$('.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(); 
    } 

私はパックマンのコードとほぼ同様の私のコードを考えて、diferrence：これらは私のjQueryのコードです

---

UPDATE

:)前にありがとう

$（ 'select.kategori-buku'）。変更（function（）{}）;

と

varキーワードとにかく

、クリスとパックマンのために大きな感謝。私は本当にあなたの助けに感謝：私はあなたのポストのすべてのHTMLオブジェクトが属性hiddenを持って

内の任意のjQueryのを見ない

Answer 1

あなたの状況が非常によく分かっていれば、このコードはさらに役立つかもしれません！デフォルトで // .subkategori-buku-umumとselect.kategori-bukuあなただけ

.kategori-buku , .subkategori-buku-umum{display : none} 

を作ることができ、今あなたがここに物事をアニメーション化するために、いくつかのJSコードを挿入しますCSSのように、彼らは非表示になります私はそれが少し助けを願ってい

$('select.kategori-buku').change(function(){ 
     var val = $(this).val(); 
     if(val === "buku_pelajaran"){ 
      $('.subkategori-buku-pelajaran').show(); 
      $('.subkategori-buku-umum').hide(); 
     }else if(val === "buku_umum"){ 
      $('.subkategori-buku-pelajaran').hide(); 
      $('.subkategori-buku-umum').show(); 
     } 
    }); 

：私のアプローチです。

Answer 2

D。 Javascript/JQueryを使用して選択内容を確認し、残りを非表示にすることができます。

Answer 3

私はこのような何かで作業したい：

$('select').change(function(){ 

    var search = $(this.options[this.selectedIndex]).attr('rel'); 
    var all = $('.hide-on-select').show(); 
    var hide = $('[rel="'+search+'"]').hide(); 

}); 

その後、私は隠された、様々なrel属性をリンクたかったすべての要素に「非表示の選択」クラスを追加します。

これはテキストエリアで入力し、作業実施

追加を提供しない考えを伝えることを意図されています

それは最初に私そのようにI fiddled' it楽しみのように見えたし、それが少し簡単になります考えた：

$('.sub').hide(); 
$('select.kategori-buku').change(function() { 
    var search = 'subkategori-' + ($(this.options[this.selectedIndex]).val().replace('_', '-')); 
    $('.sub').hide(); 
    $('.sub.'+search).show(); 
}); 

私もにHTMLで2つの.subのクラスを追加しました要素。