jquery - 页面刷新时表单数据消失

Question

在这段代码中，我没有找到如何让 table1 包含数据的解决方案。当表2刷新后显示表1的数据消失了!我该如何解决这个问题？

         <?php
$menucompare="";
if (isset($_POST["menucompare"]))
{
 $menucompare= $_POST['menucompare'];
 $table1 = '
                        <table id= "Table1" width="100%" border="1" cellspacing="0" cellpadding="0">
                                        <!--SW - You need a tr tag around these headers-->
                                        <th >Weeks</th>
                                        <th ><p></p></th>
                                        <th > More Details</th>


                                        <tr id="tr">

                                                <tr id= "tr " >
                                                   <td  >gggg</td>
                                                   <td >kkkkk</td>
                                                   <td >
                                                                        <form name ="dets" method="POST" action="">
                                                                                <input class = "showt" name ="wnumber" id ="wnumber" type="submit" value= "More Details" />
                                                                                <input type="hidden" name="data" value="wnumber" />

                                                                                   <noscript>
                                                                                <input type="submit" value="Submit"/>
                                                                                   </noscript>
                                                                        </form>
                                                                </td>
                                                </tr>
                                        </tr>
                                </table> ';
}
else if (isset($_POST["data"]))
{
        // put whatever db process you need somwhere in this if statement

         $table1 = '
                        <table id= "Table1" width="100%" border="1" cellspacing="0" cellpadding="0">
                                    <!--SW - You need a tr tag around these headers-->
                                    <th >Weeks</th>
                                    <th ><p></p></th>
                                    <th > More Details</th>


                                    <tr id="tr">

                                            <tr id= "tr " >
                                               <td  >gggg</td>
                                               <td >kkkkk</td>
                                               <td >
                                                                    <form name ="dets" method="POST" action="">
                                                                            <input class = "showt" name ="wnumber" id ="wnumber" type="submit" value= "More Details" />
                                                                            <input type="hidden" name="row_id" value="value of row id" />
                                                                            <input type="hidden" name="data" value="wnumber" />

                                                                               <noscript>
                                                                            <input type="submit" value="Submit"/>
                                                                               </noscript>
                                                                    </form>
                                                            </td>
                                            </tr>
                                    </tr>
                            </table> ';


        $table2 = '
                          <div id="Table2">
                                  <table width="100%" border="1"  cellspacing="0" cellpadding="0">
                                          <tr>
                                                  <th id="wekkNum"> wnumber</th>
                                                  <th>Your place</th>
                                                  <th>Your arr</th>
                                          </tr>

                                          <tr >
                                                  <td>hhhh</td>
                                                  <td>kkkk</td>
                                                  <td>jjjj</td>
                                          </tr>

                                  </table>
                          </div>             
                  ';                   
}
?>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
        /*Start Functions*/
        function displayVals() {
                var singleValues = $("select option:selected").text();
                $("#hiddenselect").val(singleValues);
                $("p").html("Procent of : &nbsp &nbsp" + singleValues);
        }
        /*End functions*/

        /*Start Ready*/
        $(document).ready(function(){
                $("select").change(function() {
                        displayVals();
                });
        displayVals();

                $("select#menucompare").change(function() {
                        $("#aform").submit();  
                });
    });
        /*End Ready*/
</script>
<form id="aform" method="post">
        <select id="menucompare" name ="menucompare" size="1" onchange="submitaform()">
                <option selected='selected'>Select one</option>
                <option value="value1" <?php    if ($menucompare == "value1") { echo " selected='selected'"; } ?> >Text 1</option>
                <option value="value2" <?php   if ($menucompare == "value2") { echo " selected='selected'"; } ?> >Text 2</option>
                <option value="value3" <?php   if ($menucompare == "value3") { echo " selected='selected'"; } ?> >Text 3</option>
                <option value="value4" <?php    if ($menucompare == "value4") { echo " selected='selected'"; } ?> >Text 4</option>

        </select>
        <input type="hidden" name="hiddenselect" value="<?php echo $menucompare ;  ?>" />      
</form>
<?php
if (isset($table1))
{
        print $table1;
}
if (isset($table2))
{
        print $table2;
}
?>

这是我的全部代码。希望有解决这个问题的方法，我已经查看了所有帖子，但没有类似的问题。

Answer 1

/*Start Ready*/
$(document).ready(function(){
    $("select").change(function() { 
        displayVals(); 
    });
    displayVals();

那一秒displayVals();此代码片段中的内容在页面加载后立即触发，我预计这就是您错误的原因，因为页面加载时尚未选择任何内容。

您的 table2 将不会在页面加载或页面刷新(这只是强制页面加载)时显示，因为您具有内联样式 <div id="Table2" style="display:none;"> 。与您期望保留选择选项的类似问题...如果页面刷新，它将重置为默认状态，因此没有选择的选项。