Hide and show implementation using js

JavaScript
1

here is my problem …i am successfully fetching data from database in form of dropdown but on clicking on dropdown menu i want to impliment hide and show …here is my code please help

<html>
  <head>
    <title>infokart problem </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $('#purpose').on('change', function() {
          if ( this.value == '1')
     
          {
               $("#business_new").hide();
            $("#business").show();
          }
          else  if ( this.value == '2')
          {
              $("#business").hide();
            $("#business_new").show();
          }
           else  
          {
            $("#business").hide();
          }
        });
    });
    </script>
    </head>
    <body>
      <select id='purpose'>
      <option>Select collage name</option>
    <?php
    $link=mysql_connect("localhost","root","");
    mysql_select_db("infokart",$link);
    $i=0;
    $query="select * from collage_data";
    $row=mysql_query($query);
    while($data=mysql_fetch_array($row))
    {
    	
    ?>

    <option value="$i++"><?php echo $data["collage"] ?></option>
    <?php
    }?>


    </select>
    <div style='display:none;' id='business'>Business Name<br/>&nbsp;
    <br/>&nbsp;
        <input type='text' class='text' name='business' value size='20' />
        <input type='text' class='text' name='business' value size='20' />
        <br/>
    </div>
    <div style='display:none;' id='business_new'>Business Name<br/>&nbsp;
    <br/>&nbsp;
        <input type='text' class='text' name='business' value="1254" size='20' />
        <input type='text' class='text' name='business' value size='20' />
        <br/>
    </div>

  </body>
</html>