skip to Main Content

In a laravel blade page I have a controller sending planTypes and stored like this:

arr = [];
var planTypes = @json($planTypes);
$('#multiselect').change(function (e) {
    var plan_id = $(this).val();
    arr.push(plan_id);
});

What it does? For any change in a dropdown listing all planTypes I capture the unique id and store it in a js array (arr)

The user has the possibility to add multiple planTypes in the same page without the need to refresh and that is why the change js function

Whenever I render the new dropdown, I would like to only display the remaining unused planTypes and I try to do it like this:

var item=
            +'            <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
            +'                <option value="">--</option>'
                            @foreach($planTypes as $planType)
                                if(!arr[{{ $planType->id }}]) {
            +'                    <option value="{{ $planType->id }}">{{ $planType->name }}</option>'
                                }
                            @endforeach

But for some strange reasons, I cannot make it work like that, combining blade @foreach and javascript if

Could someone point me to the correct approach?

Thank you!
+’ ‘

2

Answers


  1. Try something like this:

    <script>
      const planTypes = {!! json_encode($planTypes) !!};
      
      // use this HTML however you want
      let html = `
         <select id="multiselect" name="planTypes[0][]" class="selectpicker form-control type">'
            <option value="">--</option>
            ${planTypes.map(planType => `<option value="${planType.id}">${planType.name}</option>`)}
         </select>
      `;
    
    Login or Signup to reply.
  2. <script>
        var planTypes = {!! json_encode($planTypes) !!};
        var filter_planTypes = planTypes;
        $(document).on('change', '#multiselect', function () {
            var plan_id = $(this).val();
            filter_planTypes = filter_planTypes.filter(function(val) {
                return val.id != plan_id;
            });
            var options = '<option value="">Select</option>';
            $.each(filter_planTypes, function (key, value) {
                options += '<option value="'+ value.id +'">'+ value.name +'</option>';
            });
            $('#multiselect').html(options);
            $('#multiselect').trigger("change");
        });
    </script>
    

    OR
    if you want to use multiselect the better option is to user select2 js library

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    
    
    
    <select id="multiselect" name="planTypes[]" class="selectpicker form-control type" multiple="multiple">
        <option value="">--</option>
        @foreach($planTypes as $planType)
            <option value="{{ $planType->id }}">{{ $planType->name }}</option>               
        @endforeach
    </select>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Select2 Multiple
            $('#multiselect').select2({
                placeholder: "Select",
                allowClear: true
            });
        });
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search