Question

这是我的刀片

<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>

这里我有我的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>

当我点击第一个选择下拉列表时，它变化很好，但我在foreach中选择了这个意味着我有多个选项，所以另一个下拉列表第二个它不起作用..我试过放event.preventdefault但它不起作用..有人可以帮助我，为什么js代码它不适用于第二次选择（下拉列表）..？

Answer 1

你可以查看你的浏览器控制台吗，mybe你有一个ajax错误

在js小提琴中，代码在第二个事件中执行

https://jsfiddle.net/50k483nn/1/

您还可以更改事件点击以更改选择下拉列表

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

通过

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

两个或更多选择选项只有第一个工作Ajax

1 个答案: