Problem with my "switch case"

Hello,

1. <form>
2. <select size="1" name="categories" class="texte">
3. <option value="0">-- catégories --</option>
4. <option value="1">lion</option>
5. <option value="2">butterfly</option>
6. </select>
7. <div id="options">
8.     <p class="lion" style="display: none;">
9.     <input type="text" size="8" value="lion"/>
10.     </p>
11.     <p class="butterfly" style="display: none;">
12.      <input type="text" size="8" value="butterfly"/>
13.     </p>
14. </div>
15. </form>

1. $(document).ready(function(){
2.    $("select[name='categories']").change(function(){
3.     var valeur=parseInt($(this).attr("value"));
4.     switch(valeur){
5.         case(0):$("div#options p").hide();break;default:;
6.         case(1):$("div#options p.lion").show();break;
7.         case(2):$("div#options p.butterfly").show();break;
8.          };
9.      });
10.  });

My problem is I'm missing something in my code.
When I select Lion, then Butterfly, Lion does not clear, it should be replaced by my choice Butterfly.
I wonder if I'll have to like that.
It should be a Lion is hiding when Butterfly is chosen. Butterfly or hiding when Lion is chosen.
But there is also another problem is that the position of my tags is considered <P></P> and I do not want to shift, one takes the place of another.
It's simple in theory but in practice 

Thanks

• Topic Participants

• ds75

• bentonam