Dependent dynamic Select menu, The second menu is not getting data-CodePudding

I am try to create a dependent select menu, where selecting the division will show the district under it on another select menu. I used ajax for it. I a newbie in ajax. The select menu looks like this. enter image description here

After selecting division the district select menu will be enabled. The problem I am facing is the district is showing null. The code is getting the id of selected division but it could not select the district depend on the id. My database has one to many relation where one division has many district. I am giving the code here. Controller

$data['divisions'] = DB::table('divisions')->get();
return view('Backend.pages.seller.manage_seller_profile',compact('seller_profile','districts','universities','subs','councilors'),$data);

I am passing many things, But for this part I am only passing data variable.

Jquery

$(document).ready(function() {
        $('#division').change(function() {
            var division = $('#division').val();
            $('#district').html('');
            $.ajax({
                url: '/getDistrict/{id}',
                type: 'GET',
                data: {
                    myID: division
                },
                dataType: "json",
                success: function(data) {
                    $('#district').append('<option value="">'   "Select District"   '</option>');
                    $.each(data, function(key, district) {

                        $('#district').prop('disabled', false).css('background', '#fff').append('<option value="'   district.id   '">'   district.name   '</option>');
                    });
                },
                error: function() {

                }
            });
        });
    });

It can show data of division variable properly. but afterwards what happened I am not sure.

Route

Route::get('/getDistrict/{id}', 'AddressController@getDistrict');

getDistrict Function

function getDistrict()
    {
        $id = $_GET['myID'];
        $res = DB::table('divisions')
        ->join('districts','divisions.id','=','districts.divisions_id')
        ->where('divisions.id', $id)
        ->get();
        return Response::json($res);
    }

I am thankful for any kind of help. I can't understand where I messed up.

CodePudding user response：

i can give you a working example

blade

first select

 <select class="select_option" name="category" id="category">
  <option value="">All Categories</option>
   <option value="source">Lead Source  </option>
    <option value="group">Group</option>
     <option value="agent" >Agent</option>
     <option value="status">Status</option>
  </select>

second select

       <select class="form-control" name="selectedValue"id="selected-value">
    </select>

ajax

<script type="text/javascript">
    $("#category").change(function() {
        $.ajax({
            url: "{{ url('/category-data') }}?category="   $(this).val(),
            method: 'GET',
            success: function(data) {
                $('#selected-value').html(data.html);
            }
        });
    });
</script>

Route

 Route::get('/category-data','User\LeadController@categoryData');

Controller

    public function categoryData(Request $request)
    {


        $id = $request->category; // call the name you are passing instead fo category
        $html = '';
        if ($id) {

            $res = DB::table('divisions')
            ->join('districts','divisions.id','=','districts.divisions_id')
            ->where('divisions.id', $id)
            ->get();

            foreach ($res as $re) {
                $html .= '<option value="' . $re->id . '">' . $re->name . '</option>';
            }
        }  else {
            $html = '<option value="">Select </option>';
        }
        return response()->json(['html' => $html]);
    }