Select categories

Question

im a beginer and im a bit stuck with my code.

I have categories in an array, im listing them in a drop down box.

And i would like to do that every categori has a different form. like Films have a Film form music has a music form.

<script>
$('document').ready(function() {


    $('.valami').change(function() {
        $('select.valami option:selected').each(function() { 
            var data =  $(this).text();

                switch(data) {
                    case 'Film':
                        alert('Film');
                    break;

                    case 'Sorozat':
                        alert('Sorozat');
                    break;  

                    case 'Zene':
                        alert('Zene');
                    break;  

                    case 'XXX':
                        alert('XXX');
                    break;  

                    case 'Játék':
                        alert('Játék');
                    break;  

                    case 'Program':
                        alert('Program');
                    break;  

                    case 'Könyv':
                        alert('Könyv');
                    break;  

                    default: 'Film';                
                }

        });//each
    });//change

    });//ready

</script>

here is the code, with the alrest i was just testing if it works.

my problem is i ambel to make it if a category is selected, the form slides down, but if i select the other one the one selected before wont get hidden.

i tryed like this

if($('.film').is(':hidden')) {
 $('.film').show();
}else {
   $('.film').hide();
}

Its working but if i select a nother categorie it stays there, can someone give me a hint what im missing?

Thank You

html

<select name='kategoriak' class='valami'>
    <?php foreach ($kategoria as $k) { ?>

    <option value="<?php echo $k['id'] ?>"><?php echo $k['nev'] ?></option>

    <?php } ?>
</select>


<div class='film'>teh form here</div>

an the other forms like the film , and its defined as a display none in the css

Answer 1

This is how I would do it, I think it does what you want and I have changed your code a little bit, let me know if you need it differently.

I've used static HTML just to show you how its working.

HTML

<select name='kategoriak' class='valami'>
    <option value="film">Film</option>
    <option value="sorozat">Sorozat</option>
    <option value="zene">Zene</option>
</select>


<div class="form" id='film'>teh form here</div>
<div class="form" id='sorozat'>ANOTHER form here</div>
<div class="form" id='zene'>AND ANOTHER form here</div>

CSS

<style>
    div.form {
        display: none;
    }
</style>

JavaScript

<script>
$('document').ready(function() {
    $('.valami').change(function() {
        id = $('select.valami option:selected').val();

        $('div.form').hide();
        $('div#' + id).show();
    });
});
</script>

Answer 2

If I understood your question correctly you need to hide all other categories. Have you looked into the :not() selector? For example

if($('.film').is(':hidden')) {
 $('.film').show();
 $('div:not(.film)').hide();
}