javascript - Laravel 7: How to get name instead of id in dependent dropdown?

I have a dependent dropdown and it gets values by comparing ID's, the issue here is when I am trying to save the form values I am getting the ID's instead of names of the select fields. Can anyone tell me how can I get the NAME instead of ID.

My blade view with the javascript: index.blade.php`

<div class="container">
        <h2>Region</h2><br>
        <form action="details" method="POST">
            {{ csrf_field() }}
            <div class="form-group">
                <label for="title">Select Country:</label>
                <select id="country" name="country" class="form-control" style="width:350px" required>
                    <option value="" selected disabled>Select</option>
                    @foreach($countries as $key => $country)
                    <option value="{{$key}}">{{$country}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label for="title">Select State:</label>
                <select name="state" id="state" class="form-control" style="width:350px" required>
                </select>
            </div>
            <div class="form-group">
                <label for="title">Select City:</label>
                <select name="city" id="city" class="form-control" style="width:350px" required>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    
    <script type="text/javascript">
        $('#country').change(function() {
            var countryID = $(this).val();
            if (countryID) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-state-list')}}?country_id=" + countryID,
                    success: function(res) {
                        if (res) {
                            $("#state").empty();
                            $("#state").append('<option value="">Select</option>');
                            $.each(res, function(key, value) {
                                $("#state").append('<option value="' + key + '">' + value + '</option>');
                            });

                        } else {
                            $("#state").empty();
                        }
                    }
                });
            } else {
                $("#state").empty();
                $("#city").empty();
            }
        });
        $('#state').change(function() {
            var stateID = $(this).val();
            if (stateID) {
                $.ajax({
                    type: "GET",
                    url: "{{url('get-city-list')}}?state_id=" + stateID,
                    success: function(res) {
                        if (res) {
                            $("#city").empty();
                            $("#city").append('<option value="">Select</option>');
                            $.each(res, function(key, value) {
                                $("#city").append('<option value="' + key + '">' + value + '</option>');
                            });

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

My Controller for the dropdown: DropdownController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class DropdownController extends Controller
{
    public function index()
    {
        $countries = DB::table("countries")->pluck("name", "id");
        return view('index', compact('countries'));
    }

    public function getStateList(Request $request)
    {
        $states = DB::table("states")
            ->where("country_id", $request->country_id)
            ->pluck("name", "id");
        return response()->json($states);
    }

    public function getCityList(Request $request)
    {
        $cities = DB::table("cities")
            ->where("state_id", $request->state_id)
            ->pluck("name", "id");
        return response()->json($cities);
    }

    public function show(Request $request)
    {
        dd(request()->all());
    }
}

The payload I am getting after data dump is the ID's:

array:4 [?�?
  "_token" => "xxxxxxxxxxxxxxxxxxxxxxxxx"
  "country" => "1"
  "state" => "5"
  "city" => "124"
]

What I want is to get Names:

array:4 [?�?
  "_token" => "xxxxxxxxxxxxxxxxxxxxxxxxx"
  "country" => "country_name"
  "state" => "state_name"
  "city" => "city_name"
]

Solution:

You should change the name of your select from name to name[]