how to Load Dependent Dropdown on Multi-Select in laravel

Question

I want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code i want to load dependent dropdwon on multiselect in laravel.how can i load ?now i have sigle select to load dropdown .below is my code

<select class="form-control"  id="region_country_id" name="region_country_id" >
    <?php foreach ($countries as $key => $value) { ?>
    <option value="<?php echo $value->id; ?>"<?php if($product->region_country_id == $value->id){ echo "selected";} ?>>
        <?php echo $value->name;?>
    </option>
    <?php } ?>
</select>

 <select class="form-control" id="region_id" name="region_id" style="margin-top: 10px;" >
     <?php if(Session::get('branch_access') != 1)
     {?>
      <option value="">All region</option>
      <?php } ?>
      <?php foreach ($regions as $key => $value)  { ?>
      <option value="<?php echo $value->id; ?>" <?php if($value->id == $product->region_id) { echo "selected";} ?>><?php echo $value->region; ?>
      </option>
      <?php  } ?>
 </select>

below is script for above

$('body').on('change', '#region_country_id', function() {
    loadOptionRegion($(this).val());
});

function loadOptionRegion(countryID) {
    $.ajax({
        method: "POST",
        url: "/region/country",
        dataType: 'json',
        data: {
            'country_id': countryID
        },
        beforeSend: function() {},
        success: function(data) {
            console.log(data.data.region);
            var regionList = data.data.region;
            var str = '<option value="0">All Region</option>';
            $.each(regionList, function(index, value) {
                str = str + "<option value='" + value.id + "'>" + value.region + "</option>";
                console.log(str);
            });
            $("#region_id").html(str);

        }
    })
}

Answer 1

{!! Form::label("Department") !!}
 <select id="depId" class="form-control" name="depId">
      <option value="">--- Select Department ---</option>
           @foreach ($departments as $key => $value)
               <option value="{{ $key }}">{{ $value }}</option>
           @endforeach
</select>     
{!! Form::label("Sub Office") !!}
 <select id="sub_office_id" class="form-control" name="sub_office_id">
         <option value="">--- Select Sub Offices ---</option>
 </select>

//AND the javascript is

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>$("#depId").change(function()  {
        depId = $(this).val();
        if(depId) {
            $.ajax({

                url: "{{ route('userform') }}",
                type: "GET",
                data: {id:depId},
                dataType: "json",
                success:function(data) {

                    $("#sub_office_id").empty();
                    $.each(data, function(key, value) {
                        $("#sub_office_id").append('<option value="'+ key +'">'+ value +'</option>');
                    });

                }
            });

        }else{
            $("#sub_office_id").empty();
        }
    });</script>

//and the route for ajax is

  Route::get('userform',array('as'=>'userform','uses'=>'Admin\UserController@userformAjax'));

//and the controller method for ajax is

 public function userformAjax(Request $request)
{
    $data = $request->id;

    $suboffices = $this->suboffice
        ->where("depId",$data)
        ->lists("subOffice","id");

    return json_encode($suboffices);

}

//here we use magic method to send the id to the controller

//here i get proper sub offices for main offices so you can change the code to get regions for a country and make sure ajax is working or not by directly enter the route of ajax into the url and correct the errors in the ajax then it will work fine.

Answer 2

Very first add the multiple in the select box

<select class="form-control"  id="region_country_id" name="region_country_id" multiple>

Now in your controller change the query from where to whereIn country ID

From:

->where('country_id',$countryId);

To:

->whereIn('country_id',$arrOfCountryID);