AJAX 提交后停留在同一页面，在同一页面输出答案

【问题标题】：AJAX stay on same page after submit, output on same pageAJAX 提交后停留在同一页面，在同一页面输出
【发布时间】：2016-05-07 05:53:18
【问题描述】：

我的 HTML 表单中有一些下拉菜单如下所示：

<form name="fee" method="POST" action="">
<p><span class="title">Number of artists:</span>
    <select name="Number">
        <option value="" rel="none" selected disabled>Please select an option..</option>
        <option value="one" rel="one_art">One artist only</option>
        <option value="more" rel="more_arts">More than one artists</option>
</p>

点击提交按钮后会生成一个汇总表。

<input type="submit" value="Calculate">

我的问题是：每当我点击按钮时，之前选择的选项都会被重置。并且只有摘要显示在页面的末尾。有没有办法在不清除先前选择的选项的情况下在同一页面上输出摘要？

提前致谢！！

【问题讨论】：

检查Name 的值，然后检查echo "selected" 与下拉列表匹配的值...或使用您在标题中提到的Ajax。
您需要使用 verify 语句进行选择，并且在子选项中您必须回显所选属性。

标签： php jquery html ajax forms

【解决方案1】：

我认为您最好的选择是使用 AJAX POST 来发布表单数据，并使用 JQuery 来保持选择的相同选项：

   $(document).ready(function() {
                    $("#fee").on('submit',(function(e) {
                        e.preventDefault();
                        var selectedOption = $( "#Number option:selected" ).text();

                        $.ajax({
                           url: "here put the url to the php page handling your form data", 
                           type: "POST",
                           data: new FormData(this),
                           contentType: false,
                           cache: false,
                           processData: false,
                           success: function ()
                           {
                              $("#Number").val(selectedOption);

                           }
                        });
                    }
                });

【讨论】：