如何通过onChange事件用下拉选项的JSON数据填充表单？

下面是完整的实现方案，包含HTML结构和JavaScript逻辑，能实现选中下拉选项后自动把JSON数据填充到对应表单输入框：

<select id="userSelector">
    <option value='{"firstname":"test","lastname":"test","tel":"test"}'>Irakli</option>
    <option value='{"firstname":"Alice","lastname":"Smith","tel":"1234567890"}'>Alice</option>
</select>
<form id="userForm">
    <input name="firstname" type="text" placeholder="名">
    <input name="lastname" type="text" placeholder="姓">
    <input name="tel" type="tel" placeholder="电话">
</form>

<script>
// 获取下拉框和表单元素
const selector = document.getElementById('userSelector');
const form = document.getElementById('userForm');

// 监听下拉框的选择变化事件
selector.addEventListener('change', function() {
    const jsonStr = this.value;
    if (!jsonStr) return;

    try {
        // 把JSON字符串解析成对象
        const userInfo = JSON.parse(jsonStr);
        // 遍历对象里的每个字段，匹配表单输入框
        Object.keys(userInfo).forEach(fieldName => {
            const input = form.querySelector(`[name="${fieldName}"]`);
            if (input) {
                input.value = userInfo[fieldName];
            }
        });
    } catch (err) {
        console.error('JSON格式错误，无法解析:', err);
    }
});
</script>

核心逻辑说明 #

• 给下拉框和表单添加ID，方便快速定位元素
• 监听下拉框的change事件，每次选中新选项时触发
• 解析选项值里的JSON字符串为JS对象，用try-catch处理可能的格式错误，避免脚本挂掉
• 遍历对象的字段名，通过输入框的name属性匹配对应元素，赋值填充

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