Laravel前端实现将Select值传入Input的name属性

你只需要借助JavaScript监听下拉选择框的变化事件，就能动态把选中的值设置为id="store"的input标签的name属性。下面是适配你Laravel项目的具体实现方案：

原生JavaScript版本（无需额外依赖） #

先保留你的原有HTML结构，再添加监听逻辑：

<div class="form-group">
    <select id="projectinput5" name="interested" class="form-control">
        <option value="" selected>Select item</option>
        <option value="1">RED</option>
        <option value="2">Blue</option>
    </select>
    <input id="store" type="text" name="">
</div>

<script>
// 获取对应的DOM元素
const selectBox = document.getElementById('projectinput5');
const storeInput = document.getElementById('store');

// 监听下拉框的选择变化
selectBox.addEventListener('change', function() {
    // 获取当前选中的值
    const selectedValue = this.value;
    // 给input设置name属性
    storeInput.setAttribute('name', selectedValue);
    
    // 可选：如果用户选回默认的空选项，清空input的name
    if (!selectedValue) {
        storeInput.setAttribute('name', '');
    }
});

// 可选：页面加载时自动触发一次，同步默认选中状态
selectBox.dispatchEvent(new Event('change'));
</script>

jQuery版本（如果你的Laravel项目已引入jQuery） #

如果项目里已经在用jQuery，代码会更简洁：

<div class="form-group">
    <select id="projectinput5" name="interested" class="form-control">
        <option value="" selected>Select item</option>
        <option value="1">RED</option>
        <option value="2">Blue</option>
    </select>
    <input id="store" type="text" name="">
</div>

<script>
$(document).ready(function() {
    // 监听下拉框变化
    $('#projectinput5').on('change', function() {
        const selectedVal = $(this).val();
        // 更新input的name属性
        $('#store').attr('name', selectedVal || '');
    });
    
    // 可选：页面加载时同步默认状态
    $('#projectinput5').trigger('change');
});
</script>

后端接收提示（Laravel） #

当表单提交后，你可以在Laravel控制器里通过选中的值来获取input的内容，比如如果用户选了RED（值1），就用：

$storeValue = $request->input('1');

如果选了Blue（值2），就用：

$storeValue = $request->input('2');

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