jQuery Ajax передает значение на той же странице php

Я немного запутался при попытке отправить значение на той же странице.

 <script>
      $("select[name='sweets']").change(function () {
      var str = "";
      $("select[name='sweets'] option:selected").each(function () {
            str += $(this).text() + " ";

          });

            jQuery.ajax({
            type: "POST",
            data:  $("form#a").serialize(),

            success: function(data){
                jQuery(".res").html(data);

                $('#test').text($(data).html());


            }
            });  
            var str = $("form").serialize();
            $(".res").text(str);
    });
    </script>
 <div id="test">
 <?php
  echo $_POST['sweets'];
  ?>
  </div>
<form id="a" action="" method="post">
  <select name="sweets" >
   <option>Chocolate</option>
   <option selected="selected">Candy</option>
   <option>Taffy</option>
   <option>Caramel</option>
   <option>Fudge</option>
  <option>Cookie</option>
</select>
</form>

Ну, он будет отображаться, если он находится в верхней части тега html, но если он находится внутри тела, он будет отображать null.