CODEWITHSUNDEEP
jqueryhtmlhtml-select
Dhimas Yoga
Dhimas Yoga

Reputation: 87

How to show/hide select when another select is selected

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 :

<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>

Based on my code above, i want to :

  1. When select.kategori-buku isn't selected yet, .subkategori-buku-pelajaran table row and .subkategori-buku-umum table row will be hidden.
  2. When option with value 'buku_pelajaran' is selected in select.kategori-buku, the .subkategori-buku-pelajaran table row should be showed up and '.subkategori-buku-umum' table row should be hidden.
  3. When option with value 'buku_umum' is selected in select.kategori-buku', the .subkategori-buku-umum table row should be showed up and '.subkategori-buku-pelajaran' table row should be hidden.

I've used

.val()

method using jQuery to get the .kategori-buku's value then i used it to show/hide the .subkategori's, but i'm fail. I appreciate any answer and help from you guys. Thank you before :)

UPDATE

These are my jQuery 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();
    }

I think my code almost similar to PacMan's code, the diferrence are i don't use

$('select.kategori-buku').change(function(){});

and

var keyword

Anyway, big thanks for Kris and PacMan. I really appreciate your helps :D

Upvotes: 0

Views: 2100

Answers (3)

PacMan
PacMan

Reputation: 1358

if i understand very well your situation , this piece of code might help you more !! //by default the .subkategori-buku-umum and the select.kategori-buku they will be hidden so in the css you can make just 

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

and now you will inject some JS code to animate things here is my approach :

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

i hope it helped a little bit .

Upvotes: 0

Kris
Kris

Reputation: 41827

I'd work with something like this:

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

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

});

then add the 'hide-on-select' class to all elements i wanted hidden and link various rel attributes.

This is typed in a textarea and intended to convey an idea not provide a working implementation

additional:

It seemed like fun so I fiddled' it and made it a bit simpler then I initially thought:

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

I also added two .sub classes in the html on the tr elements.

Upvotes: 1

anu
anu

Reputation: 1007

I don't see any JQuery in your post

Every HTML object has an attribute hidden. You can use Javascript/JQuery to check what is selected and then hide the rest.

Upvotes: 0

Related Questions