javascript - 更新多选下拉列表

Question

我的网页是这样的:

我有一个由两个数据库表填充的多选下拉列表。一个表包含所有值，另一个表包含选定的值。 (此部分不可更改)

填充下拉列表并选择正确的值后，用户可以选择在列表中选择更多值，并将其以数组形式传输到另一个页面。

function getGrade($id, $grades_array)
{
        $counter = 0;
        $sql = "Select grade FROM grades";
        $result = mysql_query($sql) or die (mysql_error());
        echo '<select name="grade" multiple="multiple" id="grades_selected">';
        while ($row = mysql_fetch_array($result)) {

                if ($row['grade'] != $grades_array[$counter]) {
                        echo "<option>" . $row['grade'] . "</option>";
                } else {
                        echo "<option selected=" . $row['grade']  . ">" . $row['grade'] . "</option>";
                        $counter = $counter + 1;
                }
        }
    mysql_free_result($result);
        echo '</select>';
}

初始变量 $grades_array 是选定的值。

换句话说，我需要的解决方案是能够在页面加载时从数据库中提取值，但如果用户选择更多值，那么它将能够将这些值添加到数组中并保存该变量以在其他变量上使用页。我认为最难的部分是当用户第二次返回页面时，它不会再次从数据库中提取数据并使用相同的创建变量来填充下拉列表。

请有人帮忙!

Answer 1

您可以使用此 AJAX 进行尝试，比使用 PHP 更容易实现

suggestion text field like -- google suggestion - using AJAX/Jquery