How to run javascript showing div depending on the select option in Joomla?

Question

I have a javascript code that reveals the contents of a variant div the selection made in a drop/down menu. This code works perfectly in HTML, however when trying to implement on a Joomla 3.0 site, it does not work.

Inside joomla php I have this script:

   <?php


    //jQuery Framework in noConflict mode  

    JHtml::_('jquery.framework', false);  

    $document = JFactory::getDocument();  

    $document->addScriptDeclaration('  

    jQuery(document).ready(function(){  

    jQuery("select").change(function(){  

    jQuery( "select option:selected").each(function(){  

        if($(this).attr("value")=="3"){  

        $(".box").hide();  

        $(".choose").show();  

        }  

         if($(this).attr("value")=="5"){  

         $(".box").hide();  

         $(".green").show();  

         }  

         if($(this).attr("value")=="6"){  

         $(".box").hide();  

         $(".blue").show();  

         }  

         if($(this).attr("value")=="7"){  

         $(".box").hide();  

         $(".red").show();  

         }  

         });  

         }).change();  
    });  


');    

// Disallow direct access to this file  
defined ( '_JEXEC' ) or die ( 'Restricted access' );    

  ?> 

And this HTML:

<select id="profiletypes" name="profiletypes" class="select required pt-font-color">
            <option value="3">opção3</option>
            <option value="5">opção5</option>
            <option value="6">opção6</option>
            <option value="7">opção7</option>
        </select>

<div class="choose box">You have to select <strong>any one option</strong> so i am here</div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>

And the related CSS:

> <style>
> 
> select {    margin-bottom:20px;    border: 1px solid #111;    width:
> 200px;    background:url("sports-5.png") 96% / 15% no-repeat #6d9dc0; 
> font-size: 16px;    border: 1px solid #ccc;    height: 34px;   
> -webkit-appearance: none;    -moz-appearance: none;    appearance: none;
>     color:#fff;
>     outline: none !important;
>     cursor:pointer;
>     font-family:cursive; }
> 
> 
> //select::-ms-expand { /* for IE 11 */
>     display: none; }
> 
> 
> div.registerProfileType .pt-font-color{       background:
> url(/images/sports-5.png) 96% / 15% no-repeat #6d9dc0;
>     color:#fff; }
> 
> .box{
>         padding: 20px;
>         display: none;
>         margin-top: 20px;
>         border: 1px solid #000;
>     }
>     .red{ background: #ff0000;
>     }
>     .green{ background: #00ff00;
>     }
>     .blue{ background: #0000ff;
>     }
>     .choose{background: #ffffff;
>     }
> 
> </style>

In version 3.0 of joomla, we have to use the Jquery expression instead of $ by default, if Jquery loading is used by the normal method -> Jhtml::_('jquery.framework'); Which I also tried unsuccessfully. It will be the javascript structure that has to be placed differently?