multiple attribute selector on drop down menu

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Testing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <script>
    $(function() {
     function dropDownSelect() {
      $('#award-type').on('change', function(e) {
       var selectValue = $(this).val();

       if (selectValue == 'award1') {
        $('.award-text').show().text("you won award 1");
       } else if (selectValue == 'award2') {
        $('.award-text').show().text("you won award 2");
       } else if (selectValue == 'award3') {
        $('.award-text').show().text("you won award 3");
       } else {
        $('.award-text').show().text(" ");
       }
      });
     }
     $('#award-type').on('change', dropDownSelect).change();
    });
  </script>

 </head>
 <body>

  <select id="award-type">
   <option value="">choose one</option>
   <option value="award1">Award 1</option>
   <option value="award2">Award 2</option>
   <option value="award3">Award 3</option>
   <option value="award4">Award 4</option>
   <option value="award5">Award 5</option>
   <option value="award6">Award 6</option>
  </select>
  <div class="award-text"></div>

 </body>
</html>