如何使用下拉列表和select查询根据所选选项更新文本字段(php/mysql)

<select id="mySelect" onchange="updateTextField()">
  <option value="">请选择选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

function updateTextField() {
  var selectedOption = document.getElementById("mySelect").value;
  
  // 发送Ajax请求或使用其他方式将选项值传递给后端进行处理
  // 以下是一个简单的Ajax示例
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "update_text_field.php?option=" + selectedOption, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，可以根据后端返回的数据更新文本字段
      var response = xhr.responseText;
      document.getElementById("textField").value = response;
    }
  };
  xhr.send();
}

<?php
// 获取选项值
$selectedOption = $_GET['option'];

// 根据选项值进行相应的处理，例如查询数据库获取对应的文本内容
// 这里假设有一个名为"options"的表，其中包含"option"和"text"两个字段
// 以下是一个简单的示例查询
$servername = "数据库服务器地址";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

// 构建查询语句
$sql = "SELECT text FROM options WHERE option = '$selectedOption'";

// 执行查询
$result = $conn->query($sql);

// 检查查询结果
if ($result->num_rows > 0) {
  // 获取查询结果的第一行数据
  $row = $result->fetch_assoc();
  $text = $row["text"];
  
  // 返回查询结果给前端
  echo $text;
} else {
  // 如果没有查询到结果，可以返回一个默认值或错误提示
  echo "未找到相关文本";
}

// 关闭数据库连接
$conn->close();
?>

<input type="text" id="textField" readonly>