本文介绍如何在php+mysql网页中，利用原生javascript监听用户下拉选择变化，自动将对应用户的手机号填充至下方输入框，无需ajax请求，提升交互体验。
本文介绍如何在php+mysql网页中，利用原生javascript监听用户下拉选择变化，自动将对应用户的手机号填充至下方输入框，无需ajax请求，提升交互体验。
要实现“切换用户时自动更新手机号”这一功能，关键在于：将用户手机号作为自定义属性（data-phone）嵌入 。
你原先的 JavaScript 存在两个核心问题：
- $('select[name="User"]').data('phone') 是 jQuery 写法，但未引入 jQuery 库，且 .data() 无法直接获取非选中
- $('#phone-input').value(phone) 语法错误：jQuery 对象没有 .value() 方法，应使用 .val()；若用原生 DOM，则需 .value = ...。
✅ 推荐使用轻量、可靠、无依赖的原生 JavaScript 方案（兼容所有现代浏览器）：
<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 (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>
对应的 JavaScript（推荐放在
