Toggle an element, display the others

Each time I select an op开发者_开发百科tion, it displays the list I wanted to but without hiding the others. Do I forgot something with the toggle function?

$("select#category").change(function() {
   var category = $(this).val();
   $("select#"+category).toggle();
});

My lists are as simple as that (must display either the "1" select or the "2" but not the two):

  <form method="post">
    <select name="menu_destination" id="category">
         <option value="1" >1</option>
         <option value="2">2</option>
    </select>

    <select name="menu_destination" id="1">
         <option value="a" >A</option>
         <option value="b">B</option>
    </select>

    <select name="menu_destination" id="2">
         <option value="a" >A</option>
         <option value="b">B</option>
    </select>

Without seeing your HTML, I'd suggest using siblings(). If this doesn't work, post your HTML for a more accurate solution.

$('#' + category).show().siblings().hide();

Working demo: http://jsfiddle.net/AlienWebguy/JgFmY/

P.S. You should use $('#whatever') vs $('select#whatever'). Unlike CSS, the first one is much faster in JQuery because it uses ECMAScript's native getElementById() function whereas the latter requires the use of sizzle. Since each DOM node should have a unique ID anyway, there's no need for the tag name prefix.