Laravel实现下拉选项联动填充输入框的最优方案咨询

步骤1：在Blade模板中渲染下拉框并绑定关联数据 #

把需要填充的额外数据（比如邮箱）通过HTML5的data-*属性绑定到对应的<option>标签上，这样切换选项时前端可直接读取数据，无需额外请求后端。

示例代码：

<select id="user-select">
    <option value="">请选择用户</option>
    @foreach($users as $user)
        <option value="{{ $user->id }}" data-email="{{ $user->email }}">{{ $user->name }}</option>
    @endforeach
</select>

<input type="email" id="email-input" placeholder="自动填充邮箱">

步骤2：用JavaScript监听切换事件，填充目标输入框 #

通过监听下拉框的change事件，获取选中选项的data-*属性值，直接赋值给指定输入框即可。

原生JavaScript实现：

const userSelect = document.getElementById('user-select');
const emailInput = document.getElementById('email-input');

userSelect.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const email = selectedOption.dataset.email;
    emailInput.value = email || '';
});

jQuery实现（项目已引入jQuery时可用）：

$('#user-select').on('change', function() {
    const email = $(this).find('option:selected').data('email');
    $('#email-input').val(email || '');
});

方案优势 #

• 性能高效：无需额外AJAX请求，直接从DOM读取数据，响应快且减少服务器负载。
• 实现简洁：仅需Blade渲染时绑定数据+少量JS代码，逻辑清晰易维护。
• 体验流畅：选项切换时数据实时填充，无等待延迟。

如果需要填充的关联数据较多（如电话、地址等），可以把用户数据序列化为JSON字符串存到data-*属性中，一次性获取所有信息：

<option value="{{ $user->id }}" data-user="{{ json_encode($user) }}">{{ $user->name }}</option>

userSelect.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const userData = JSON.parse(selectedOption.dataset.user || '{}');
    emailInput.value = userData.email || '';
    // 可同时填充其他字段，比如电话
    // document.getElementById('phone-input').value = userData.phone || '';
});

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