本文介绍如何在php+mysql网页中，利用原生javascript监听用户选择事件，实时将对应用户的手机号填充到输入框，无需ajax刷新页面。
本文介绍如何在php+mysql网页中，利用原生javascript监听用户选择事件，实时将对应用户的手机号填充到输入框，无需ajax刷新页面。
在表单中实现“选择用户 → 自动填充手机号”的联动效果，关键在于：将用户数据（尤其是手机号）预先嵌入HTML选项标签中，并通过JavaScript准确读取当前选中项的自定义属性值。你当前的代码已正确使用 data-phone 属性存储手机号，但存在两个核心问题：一是 jQuery 方法 .value() 不存在（应为 .val()），二是 $(...).data('phone') 无法直接获取选中 <option> 的 data 属性（.data() 默认读取的是 <select> 元素自身的 data 属性，而非其子元素）。
✅ 正确做法是：获取 <select> 元素 → 定位当前选中的 <option> → 用 getAttribute('data-phone') 读取其 data-phone 值 → 赋值给输入框。
以下是完整、可运行的优化方案：
✅ HTML + PHP 部分（保持不变，仅微调增强健壮性）
<select name="User" class="selectinput" onchange="updatePhone()">
<option value="" disabled selected>User</option>
<?php
$usersql = "SELECT id, name, phone FROM user";
$userresult = mysqli_query($conn, $usersql);
if ($userresult && mysqli_num_rows($userresult) > 0) {
while ($row = mysqli_fetch_assoc($userresult)) {
// 使用 htmlspecialchars 防止 XSS（重要！）
$name = htmlspecialchars($row["name"]);
$phone = htmlspecialchars($row["phone"]);
echo "<option value='{$row['id']}' data-phone='{$phone}'>{$name}</option>";
}
}
?>
</select>
<div class="w-100 d-flex">
<div class="d-flex">
<div class="align-self-center">Phone number:</div>
</div>
<input style="width:80%" type="text" name="Phone" id="phone-input" readonly>
</div>? 提示：添加 readonly 属性可防止用户手动修改（若需编辑，可改为 disabled 或移除）；value="" 和 disabled selected 确保初始状态不触发误填。
✅ JavaScript 部分（推荐原生写法，无依赖）
function updatePhone() {
const select = document.querySelector('.selectinput');
const phoneInput = document.getElementById('phone-input');
const selectedIndex = select.selectedIndex;
// 若未选择有效选项（如仍为默认项），清空输入框
if (selectedIndex <= 0) {
phoneInput.value = '';
return;
}
const selectedOption = select.options[selectedIndex];
const phone = selectedOption.getAttribute('data-phone') || '';
phoneInput.value = phone;
}⚠️ 注意事项
- 安全第一：PHP 输出 name 和 phone 时务必使用 htmlspecialchars()，避免 XSS 攻击；
- 兼容性：该方案兼容所有现代浏览器，无需引入 jQuery；
- 扩展建议：如需同时更新多个字段（如邮箱、部门），可在 <option> 中添加更多 data-* 属性（如 data-email="..."），并在 JS 中统一读取；
- 错误处理：mysqli_query() 后建议检查 $userresult 是否为 false，避免 mysqli_num_rows() 报错。
通过此方案，用户每次切换下拉选项，手机号即刻响应更新，体验流畅、代码简洁、安全可靠。
