Dropdown list show two dropdown list when using selectpicker

Hi,

I am using bootstrap 4 and bootstrap selectpicker v1.13.14. My dropdown shows twice like the image attached. I have a added the bootstrap css file and imported popper as well.

When i remove the select class, the dropdown is one. I do not understand why this is happening. Any assistance will be appreciated.

My code is as below :slight_smile:

<div class="col-md-6">
                                    <div class="form-group">
                                        <label>Select Facility</label>
                                        <select class="selectpicker form-control" aria-label="Default select example" id="facility_id" name="facility_id">
                                            <option value="">Select Facility</option>
                                            @foreach($facilities as $facility)
                                                <option value="{{$facility->id}}" > {{$facility->name}}</option>
                                            @endforeach
                                        </select> 
                                    </div>     
                                </div>   

This are my imports :slight_smile:

@push('styles') 
    <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-select.css') }}" type="text/css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/css/bootstrap-select.min.css"> -->

@endpush

@push('scripts')
    <script type="text/javascript" src="{{asset('assets/vendor/jquery/dist/jquery.min.js') }}"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
    <script type="text/javascript" src="{{asset('assets/vendor/bootstrap/dist/js/bootstrap.min.js') }}"> </script>
    <script type="text/javascript" src="{{asset('assets/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js"></script>.
    <!-- <script type="text/javascript" src="{{ asset('assets/js/bootstrap-select.min.js') }}"> </script> -->
    <script>

    $('#facility_id').on('change', function (e) {

        $('#department').empty();

        var z = $(this).val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            url: '/get_facility_departments',
            data: {
                "facility_id": z
            },
            dataType: "json",
            success: function (data) {
                alert(data);
                var select = document.getElementById("department"),
                    opt = document.createElement("option");

                    opt.value = "";
                    opt.textContent = "Select Department";
                    select.appendChild(opt);
                for (var i = 0; i < data.length; i++) {
                    console.log(data);
                    
                var select = document.getElementById("department"),
                    opt = document.createElement("option");

                    // opt.value = data[i].id;
                    // opt.textContent = data[i].name;

                    opt.value = data;
                    opt.textContent = data;

                    select.appendChild(opt);
                }
            }
        })
    });

    </script>
![zz|690x285](upload://k67UCWCghbKmrCfOOehZVcvn71F.png)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.