求助：Select2组件选中后name字段无法显示选中值的解决方法

表单包含姓名（对应id为nom的字段）、电话、地址三个输入项，需求是用户选中姓名后自动填充电话和地址字段。目前电话与地址的自动填充功能正常，但选中姓名后，nom字段始终为空，需解决该字段显示选中值的问题。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Formulaire </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-BJnMxKY7XJivOD+pi8eWteNd1RiMbPCJzQQIFviRJgo0p/zzZMi1CmYTgEdz/2CszgJjKk3TqtHZItp0JHvJng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

  <script>
    $(document).ready(function() {
      console.log("Appel de select2");
      
      $('#nom').select2({
  placeholder: 'Sélectionnez',
  allowClear: true,
  language: {
        searching: function() {
            return "";
        }
    },
  minimumInputLength: 0,
  ajax: {
    url: 'search.php',
    dataType: 'json',
    delay: 0,
    data: function(params) {
      return {
        q: params.term
      };
    },
    processResults: function(data) {
      return {
        results: data
      };
    },
    cache: true
  }
}).on('select2:select', function(e) {
  var selectedText = $('#nom').val();
  console.log(selectedText);
  console.log($('#nom').val());
});

      $('#nom').on('change', function() {
        var nom = $(this).val();
        $.ajax({
          url: 'get_data.php',
          method: 'POST',
          data: {nom: nom},
          dataType: 'json',
          success: function(response) {
            $('#tel').val(response.tel);
            $('#adr').val(response.adr);
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>Formulaire de recherche</h1>
<form>
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom"><br>
  <label for="tel">Téléphone :</label>
  <input type="text" id="tel" name="tel" readonly><br>
  <label for="adr">Adresse :</label>
  <input type="text" id="adr" name="adr" readonly>
</form>

</body>
</html>

get_data.php代码 #

<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";

try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}

// Obtient le nom sélectionné par l'utilisateur
$nom = $_POST['nom'] ?? '';

// Requête SQL pour récupérer les données associées au nom sélectionné
$sql = "SELECT nom, tel, adr FROM beneficiaire WHERE nom = :nom";
$stmt = $pdo->prepare($sql);
$stmt->execute(['nom' => $nom]);
$result = $stmt->fetch(PDO::FETCH_ASSOC);

// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($result);

search.php代码 #

<?php
// Connexion à la base de données
$host = 'localhost';
$user = '';
$password = '';
$dbnom = '';
$dsn = "mysql:host=$host;dbname=$dbnom;charset=utf8mb4";

try {
  $pdo = new PDO($dsn, $user, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  echo 'Erreur de connexion à la base de données : ' . $e->getMessage();
  exit;
}

// Obtient le terme de recherche saisi par l'utilisateur
$q = $_GET['q'] ?? '';

// Requête SQL pour récupérer les noms correspondant au terme de recherche
$sql = "SELECT nom, tel FROM beneficiaire WHERE nom LIKE :q";
$stmt = $pdo->prepare($sql);
$stmt->execute(['q' => "%$q%"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Formatte les résultats pour qu'ils soient utilisables par Select2
$autocomplete_results = [];
foreach ($results as $result) {
  $autocomplete_results[] = [
    'id' => $result['nom'],
    'text' => $result['nom'].' - '.$result['tel']
  ];
}

// Envoi des résultats au format JSON
header('Content-Type: application/json');
echo json_encode($autocomplete_results);

?>

问题原因及修复方案 #

核心问题 #

1. 重复引入jQuery：页面加载两个版本的jQuery，导致Select2初始化冲突，无法正确同步选中值到原输入框。
2. 事件变量顺序错误：select2:select事件中先执行console.log(selectedText)再定义变量，抛出未定义错误干扰逻辑。
3. 手动覆盖字段值：AJAX成功回调中手动设置$('#nom').val(response.nom)，干扰Select2自动同步选中值的逻辑。

修复步骤 #

1. 删除重复的jQuery引入，仅保留一个版本。
2. 调整select2:select事件代码顺序，先定义selectedText再执行日志输出。
3. 移除AJAX回调中对nom字段的手动赋值，让Select2自行处理选中值同步。

修改后，选中姓名时Select2会自动将选中项的id（即姓名）同步到nom输入框，同时电话和地址字段正常填充，解决字段为空的问题。

内容的提问来源于stack exchange，提问作者Joey