我正在处理一个JQuery问题,它接受来自select框(a、B、C和D)的输入,每次单击“submit”按钮时,它都会在同一页面中显示一个表,显示所有这些变量及其频率(计数)。
除了每次用户按下submit按钮时实际保存变量计数的部分之外,我已经做了所有的事情。你可以看到下面的代码我已经做了这么多。。。
是否必须在脚本文件的submit函数之外使用数组来保存每个变量的计数。。??我希望有人能帮忙。。。
提前谢谢!
HTML文件:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="jquery.js"></script>
        <script src="Script.js"></script>
        <title>Grade Values</title>
    </head>
    <body>
        <div id="gradesS">
        <form action="abcd.php">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit">Submit</button>
        </form>
        </div>
        <div id="result"> </div>
    </body>
</html>

php文件:(abcd.php)
<?php
$A=0;
$B=0;
$C=0;
$D=0;
if($_REQUEST['grades']=="A"){
    $A++;
}
if($_REQUEST['grades']=="B"){
    $B++;
}
if($_REQUEST['grades']=="C"){
    $C++;
}
if($_REQUEST['grades']=="D"){
    $D++;
}
$output='';
$output.='<table border="1"><tr><td>Grades</td><td>Frequency</td>';
$output.='<tr><td> A</td><td>'.$A.'</td></tr>';
$output.='<tr><td> B</td><td>'.$B.'</td></tr>';
$output.='<tr><td> C</td><td>'.$C.'</td></tr>';
$output.='<tr><td> D</td><td>'.$D.'</td></tr>';
$output.='</table>';

echo($output);

?>

JavaScript文件(JQuery):
$(document).ready(function () {
    $('#gradess').submit(function() {
         event.preventDefault();
         $.get('abcd.php', {'grades': $('#grades :selected').val()}, function(data) {
        $('#result').html(data);
    });
});
});

最佳答案

如果不想使用数据库,可以将计数器保存在窗口属性中,但如果刷新页面,计数器将丢失:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Grade Values</title>
        <script type="text/javascript">
            $(document).ready(function () {
                window.A = 0;
                window.B = 0;
                window.C = 0;
                window.D = 0;
            $("#gradess").on('click', function() {
                 var value = $('#grades :selected').val();
                 if(value == "A")      window.A++;
                 else if(value == "B") window.B++;
                 else if(value == "C") window.C++;
                 else if(value == "D") window.D++;

                 $("#A").html(window.A);
                 $("#B").html(window.B);
                 $("#C").html(window.C);
                 $("#D").html(window.D);
                 return false;
                });
            });
        </script>
    </head>
    <body>
        <div id="gradesS">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit" id="gradess">Submit</button>
        </div>

            <div id="result">
                <table border="1"><tr><td>Grades</td><td>Frequency</td>
                    <tr><td> A</td><td id="A">0</td></tr>
                    <tr><td> B</td><td id="B">0</td></tr>
                    <tr><td> C</td><td id="C">0</td></tr>
                    <tr><td> D</td><td id="D">0</td></tr>
                </table>
        </div>
    </body>
</html>

08-25 11:31
查看更多