Javascript 两个或多个选择选项仅前一个适用于Ajax

这是我的刀片

<select name="{{$bank_invited_user->role}}[]" id="role" class="form-control">
    <option value="2" @if($bank_invited_user->role == 2) selected='selected' @endif >Co-author</option>
    <option value="3" @if($bank_invited_user->role == 3) selected='selected' @endif >Contributor</option>
    <option value="4" @if($bank_invited_user->role == 4) selected='selected' @endif >Guest</option>
    </select>

角色==2）已选择==selected'@endif>共同作者
角色==3）已选择==selected'@endif>Contributor
角色==4）已选择==selected'@endif>Guest

这里是我的javascript代码：

<script type="text/javascript">
   $(document).ready(function(){ 

       $( "#role" ).on( "click", function( event ) {
        event.preventDefault();


        var role_value = $(this).val();
        var user_id = $("#role_id").val();
        var bank_id = $("#removecollaborator").val();

            $.ajax({

                method: "POST",
                url: "{{ url('/banks/change-role-in-bank') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    role_value: role_value,
                    user_id: user_id,
                    bank_id:bank_id

                },
                success: function () {
                    $("select[id=role][value=" + role_value + "]");
                    alert('Role changed');
                },
                error: function () {
                    console.log("error");
                }
            });
       });
    });  
</script>

$（文档）.ready（函数（）{
$（“#角色”）。在（“单击”）上，函数（事件）{
event.preventDefault（）；
var role_value=$（this.val（）；
var user_id=$（“#角色_id”）.val（）；
var bank_id=$（“#removecollaborator”）.val（）；
$.ajax({
方法：“张贴”，
url:“{url（'/banks/change-role-in-bank'）}”，
数据：{
_令牌：{{csrf_token（）}}}，
角色值：角色值，
用户标识：用户标识，
银行识别码：银行识别码
},
成功：函数（）{
$（“选择[id=role][value=“+role\u value+”]）；
警报（“角色已更改”）；
},
错误：函数（）{
控制台日志（“错误”）；
}
});
});
});  

---

当我单击第一个选择下拉列表时，它会发生变化，但我在foreach中有此选择，因此这意味着我有多个选择，因此另一个下拉列表第二个下拉列表不起作用。。我尝试将event.prevent设置为默认值，但不起作用。。有人能帮我一下吗，为什么js代码在第二个选项（下拉菜单）中不起作用？

你能检查一下你的浏览器控制台吗，mybe你有ajax错误吗

在js FIDLE中，代码在第二个事件中执行

您还可以更改事件单击以更改“选择”下拉列表

$( "#role" ).on( "click", function( event ) {

借

---

您的

foreach

在哪里。请在问题陈述中添加fiddle或snippet

$( "#role" ).on( "change", function( event ) {