Я немного запутался в этом, пытаясь отправить значение на той же странице.
<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, но если его внутри тела он отобразит нуль.
Вот рабочий код для вас. Чтобы отправить запрос ajax на ту же страницу, вы можете сохранить параметр url пустым, который вы уже делаете. Если вы пытаетесь заставить скрипт вести себя по-другому, когда значение $_POST имеет значение, используйте isset как я использовал ниже.
<?php if(isset($_POST['sweets'])) { echo $_POST['sweets']; exit; } ?> <script> $(function(){ $("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').html(data); } }); var str = $("form").serialize(); $(".res").text(str); }); }); </script> <div id="test"> </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>.<?php if(isset($_POST['sweets'])) { echo $_POST['sweets']; exit; } ?> <script> $(function(){ $("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').html(data); } }); var str = $("form").serialize(); $(".res").text(str); }); }); </script> <div id="test"> </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>
Вы должны обернуть свой код
$(document).ready(function(){ // your code here });
Таким образом, он будет работать только тогда, когда браузер завершит обработку структуры вашего HTML.
ОБНОВИТЬ
На вашем коде было много отладочных материалов, попробуйте это (требуется, чтобы Firebug увидел результат запроса ajax):
<script> $(document).ready(function(){ $("select[name='sweets']").change(function () { jQuery.ajax({ type: "POST", data: $("form#a").serialize(), success: function(data) { // Check the output of ajax call on firebug console console.log(data); } }); }); }); </script>