本文介绍如何在php+mysql网页中，利用原生javascript监听用户下拉选择变化，自动将对应用户的手机号填充至下方输入框，无需ajax请求，提升交互体验。
本文介绍如何在php+mysql网页中，利用原生javascript监听用户下拉选择变化，自动将对应用户的手机号填充至下方输入框，无需ajax请求，提升交互体验。
要实现“切换用户时自动更新手机号”这一功能，关键在于：将用户手机号作为自定义属性（data-phone）嵌入 <option> 标签，并在 onchange 事件中准确读取当前选中项的该属性值，再赋给目标输入框。
你原先的 JavaScript 存在两个核心问题：
- $('select[name="User"]').data('phone') 是 jQuery 写法，但未引入 jQuery 库，且 .data() 无法直接获取非选中 <option> 的 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（推荐放在 </body> 前或 DOMContentLoaded 中）：
function updatePhone() {
const select = document.querySelector('.selectinput');
const selectedOption = select.options[select.selectedIndex];
const phone = selectedOption.getAttribute('data-phone') || '';
document.getElementById('phone-input').value = phone;
}? 重要注意事项：
- ✅ data-phone 必须写在 <option> 标签内（而非 <select>），因为每个选项对应不同用户数据；
- ✅ 使用 htmlspecialchars() 对 PHP 输出的 name 和 phone 进行转义，防止 XSS 攻击；
- ✅ <option> 的 value 属性建议设为 id（用于后续表单提交），而 data-phone 仅作前端展示用途；
- ✅ 输入框添加 readonly 属性可避免用户误编辑（如需允许修改，可移除该属性）；
- ❌ 避免混用 jQuery 与原生 DOM 操作（除非已全局引入 jQuery）；若坚持用 jQuery，请确保引入且改写为：
function updatePhone() { const phone = $('.selectinput option:selected').data('phone') || ''; $('#phone-input').val(phone); }
该方案简洁高效，不依赖后端接口，响应即时，适用于中小型管理后台的用户信息联动场景。
