Code works in JSFiddle but not in Web Browser or Dreamweaver

This code works in JSFiddle fine however when I put in in a dreamweaver document or try it in a browser the div never shows. The aim is to get the div 'sreturned' to show when the user selects value '1' from the drop down. I have the code in two seperate files and link them. Any help greatly appreciated.

Here is the HTML

<body>
 <script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
 <select id = "typeoption"> 
 <option value="0">Qualifying Bet</option>
 <option value="1">Free Bet</option>
 <option value="2">Risk Free Bet</option>
 </select>
 <div style='display:none;' id='sreturned'> Stake Returned
 </div>
</body>

Here is the script

    $(document).ready(function(){
        $('#typeoption').on('change', function() {
            if ( this.value == '1')
          {
            $("#sreturned").show();
          }
          else
          {
             $("#sreturned").hide();
           }
        });
    });

Solution

EDIT: JSFiddle include jquery in all pages

Do you have add jquery script ? Try this file :

<body>
 <script type="text/javascript" src="file:///Macintosh%20HD/Applications/MAMP/htdocs/thesurebettor/Untitled-2.js"></script>
 <select id = "typeoption">
 <option value="0">Qualifying Bet</option>
 <option value="1">Free Bet</option>
 <option value="2">Risk Free Bet</option>
 </select>
 <div style='display:none;' id='sreturned'> Stake Returned
 </div>
</body>


<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
 $(document).ready(function(){
     $('#typeoption').on('change', function() {
         if ( this.value == '1')
       {
         $("#sreturned").show();
       }
       else
       {
          $("#sreturned").hide();
        }
     });
 });
</script>