如何将Chosen插件新增选项通过PHP永久插入MySQL数据库？

你现在的问题核心是前端临时添加的选项没有同步到后端数据库，所以刷新后就消失了。我们可以通过AJAX（异步JavaScript和XML）来打通前端JS和后端PHP的通信，把新增的主题提交到数据库，再同步更新前端的Chosen组件。下面是分步实现方案：

1. 重构PHP插入接口（修正现有代码） #

首先把你现有的PHP插入逻辑改成AJAX友好的接口——返回JSON响应而不是页面跳转，这样前端能明确知道请求是否成功。创建（或修改）inc/add_topic.inc.php文件：

<?php
// 仅允许POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['success' => false, 'message' => 'Metoda nie dozwolona']);
    exit();
}

require "connect.inc.php";

// 校验输入
if (!isset($_POST["topicname"]) || empty(trim($_POST["topicname"]))) {
    echo json_encode(['success' => false, 'message' => 'Puste pole tematu']);
    exit();
}

$topic = trim($_POST["topicname"]);

// 检查主题是否已存在
$sql = "SELECT name FROM topics WHERE name=?";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
    echo json_encode(['success' => false, 'message' => 'Błąd połączenia z bazą danych']);
    exit();
}

mysqli_stmt_bind_param($stmt, "s", $topic);
mysqli_stmt_execute($stmt);
mysqli_stmt_store_result($stmt);
$resultcheck = mysqli_stmt_num_rows($stmt);

if ($resultcheck > 0) {
    echo json_encode(['success' => false, 'message' => 'Temat już istnieje w bazie']);
    exit();
}

// 插入新主题
$sql = "INSERT INTO topics (name) VALUES (?)";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
    echo json_encode(['success' => false, 'message' => 'Błąd przygotowania zapytania']);
    exit();
}

mysqli_stmt_bind_param($stmt, "s", $topic);
if (mysqli_stmt_execute($stmt)) {
    echo json_encode(['success' => true, 'message' => 'Temat dodany pomyślnie', 'topic' => $topic]);
} else {
    echo json_encode(['success' => false, 'message' => 'Nie udało się zapisać tematu']);
}

// 清理资源
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

2. 修改Chosen的JS逻辑，添加AJAX请求 #

把你现有的case 13分支代码改成：先发送AJAX请求到PHP接口，确认数据库插入成功后，再更新前端的Chosen组件。

case 13: 
    evt.preventDefault();
    if (this.results_showing) {
        if (!this.is_multiple || this.result_highlight) {
            return this.result_select(evt);
        }
        
        const newTopic = $(evt.target).val().trim();
        // 空值直接跳过
        if (!newTopic) return;

        // 发送AJAX请求到后端
        $.ajax({
            url: 'inc/add_topic.inc.php',
            method: 'POST',
            data: { topicname: newTopic },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 插入成功：添加选项到下拉框并更新Chosen
                    const escapedTopic = $('<div>').text(response.topic).html(); // XSS防护
                    $(".topic-dropdown").append(`<option value="${escapedTopic}" selected>${escapedTopic}</option>`);
                    $(".topic-dropdown").trigger('chosen:updated');
                    
                    // 保持Chosen的选中逻辑
                    this.result_highlight = this.search_results.find('li.active-result').last();
                    this.result_select(evt);
                } else {
                    // 插入失败：提示用户错误信息
                    alert(response.message);
                }
            }.bind(this), // 绑定Chosen的上下文，确保能调用它的方法
            error: function() {
                alert('Wystąpił błąd podczas komunikacji z serwerem');
            }
        });
    }
break;

3. 必要的前置检查 #

• 确保你的页面已经引入了jQuery（Chosen本身依赖jQuery，AJAX也需要用它）：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="chosen.jquery.js"></script>
  

• 确认数据库表topics的字符集是UTF-8，避免出现乱码问题。
• 如果需要权限控制，可以在PHP接口里添加用户登录校验，防止未授权用户添加主题。

内容的提问来源于stack exchange，提问作者Dawid Wojtaś