javascript - Laravel 7：如何在依赖下拉列表中获取名称而不是 id？

问题描述

我有一个从属下拉列表，它通过比较 ID 来获取值，这里的问题是当我尝试保存表单值时，我得到的是 ID 而不是选择字段的名称。谁能告诉我如何获得 NAME 而不是 ID。

我使用 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>

我的下拉控制器：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());
    }
}

数据转储后我得到的有效负载是 ID：

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

我想要的是获得名称：

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

标签： javascriptphpmysqllaravel

javascript - Laravel 7：如何在依赖下拉列表中获取名称而不是 id？

问题描述

解决方案

推荐阅读