如何显示/隐藏选择另一个选择时

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-布裤没有选择的，.subkategori-布裤，pelajaran表行和.subkategori-buku-umum表行将被隐藏。
2. 当与值 'buku_pelajaran' 选项在select.kategori-布裤被选择，则.subkategori-布裤-pelajaran表行应为露面和“.subkategori-buku- umum'表格行应该隐藏。
3. 当与值 'buku_umum' 选项在select.kategori-布裤选择 '则.subkategori-布裤-umum表行应为露面和' .subkategori-布裤-pelajaran'表格行应该被隐藏。

我用

.VAL（）使用jQuery得到.kategori-布裤的值，那么我用它来显示/

方法隐藏.subkategori的，但我失败了。我很感谢你们的回复和帮助。前:)

UPDATE谢谢

---

这是我的jQuery代码：

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

我想几乎类似于Pacman的代码我的代码，将diferrence是我不使用

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

和

var关键字

无论如何，非常感谢对克里斯和小精灵。我真的很感谢你的帮助：d

Answer 1

如果我很了解您的情况，这段代码可能会帮助您更多！ 默认//将.subkategori-布裤，umum和select.kategori，布裤，他们将被隐藏所以在CSS，你可以只

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

，现在你会注入一些JS代码，这里的东西动画是我的做法：

$('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

我看不出有任何的JQuery在您的文章

每个HTML对象都有一个属性hidden。您可以使用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(); 
}); 

我还添加了两个.sub类在html上tr元素。