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>

根据我上面的代码，我想：

当 select.kategori-buku 尚未选中时， .subkategori-buku-pelajaran 表格行和 .subkategori-buku-umum 表格行将被隐藏。
在 select.kategori-buku 中选择值为“ buku_pelajaran ”的选项时， .subkategori-buku-pelajaran 表格行应该出现和“ .subkategori-buku-umum ”表格行 应隐藏
在 select.kategori-buku 中选择值为“ buku_umum ”的选项时， .subkategori-buku-umum 表格行应出现和' .subkategori-buku-pelajaran '表格行 应隐藏 < /强>

我用过


.VAL（）

使用jQuery获取 .kategori-buku 的值然后用它来显示/隐藏 .subkategori 的方法，但我失败了。我感谢你们的任何答复和帮助。谢谢你：）

更新

这些是我的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的代码类似，不同之处在于我不使用

  。
$（ 'select.kategori-布裤'）改变（函数（）{}）;

和


var keyword

无论如何，非常感谢Kris和PacMan。我非常感谢你的帮助：D

Answer 1

我使用这样的东西：

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

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

});

然后添加＆＃39;隐藏选择＆＃39;我希望隐藏的所有元素的类，并链接各种rel属性。

这是在textarea中输入的，旨在传达一个不提供有效实施的想法

其他

这似乎很有趣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类。

Answer 2

我的帖子中没有看到任何JQuery

每个HTML对象都有一个属性hidden。您可以使用Javascript / JQuery来检查所选内容，然后隐藏其余部分。

Answer 3

如果我非常了解你的情况，这段代码可能会帮助你更多!! //默认情况下.subkategori-buku-umum和select.kategori-buku它们将被隐藏所以你可以在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();
        }
    });

我希望它有所帮助。

如何在选择其他选择时显示/隐藏选择

3 个答案: