Laravel中使用Ajax实现更新功能遇到问题求助

看起来你在Laravel中实现更新功能时，用Ajax处理下拉框交互遇到了问题，我帮你梳理下代码里的关键问题和解决方案：

你的Blade代码里给下拉框设置了固定的id="role"，但name属性是{{$role}}[]（数组格式）——这说明你大概率是在循环渲染多个这样的下拉框对吧？如果是这样，页面上会出现多个id="role"的元素，而jQuery的$("#role").change()只会绑定到第一个匹配的元素上，其他下拉框的change事件根本不会触发。

修复方案：

• 要么去掉固定ID，要么给每个下拉框生成唯一ID（比如结合循环索引{{$loop->index}}）
• 改用class来绑定事件，这样所有同class的下拉框都能触发逻辑：

修改后的Blade代码：

<div class="form-group floating-label" id="role_colaboration1">
    <select name="{{$role}}[]" class="form-control role-select">
        <option value="2">Co-author</option>
        <option value="3">Contributor</option>
        <option value="4">Guest</option>
    </select>
</div>

对应的Ajax代码调整：

$(document).ready(function(){
    $(".role-select").change(function(){
        var role_value = $(this).val();
        // 后续你的业务逻辑...
        // 如果需要区分当前是哪个下拉框，可以用 $(this).attr('name') 获取对应的name属性值
    });
});

你代码里的form- control多了个空格，这会导致Bootstrap的表单样式无法正常生效，修正为form-control即可（上面的代码已经帮你修正了）。

如果你的需求是允许用户选择多个角色，记得给select加上multiple属性，此时$(this).val()会返回选中值的数组：

<select name="{{$role}}[]" class="form-control role-select" multiple>
    <!-- 选项不变 -->
</select>

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