使用Dependent下拉菜单时在数据库中存储ID，而不是名称- Laravel/JS

在使用Dependent下拉菜单时，通常会在数据库中存储关联的ID，而不是显示的名称。这样做有几个基础概念和优势：

基础概念

主键和外键：在数据库设计中，主键（Primary Key）是唯一标识表中每一行数据的字段，而外键（Foreign Key）是用来建立两个表之间关系的字段。
数据完整性：通过存储ID而不是名称，可以确保数据的完整性和一致性。名称可能会变化，但ID通常是不变的。

优势

唯一性：ID是唯一的，可以确保每个记录的唯一性。
性能：在数据库查询时，使用ID通常比使用名称更快，因为ID通常是整数类型，而名称可能是字符串类型。
灵活性：如果名称发生变化，只需要更新一个地方（即名称字段），而不需要更新所有引用该名称的地方。

类型

单选Dependent下拉菜单：用户只能选择一个选项。
多选Dependent下拉菜单：用户可以选择多个选项。

应用场景

表单：在表单中选择关联的数据，例如选择国家时，先选择洲，再选择国家。
数据管理：在管理系统中，选择关联的数据进行操作，例如选择部门时，先选择公司。

示例代码

以下是一个简单的Laravel和JavaScript示例，展示如何实现Dependent下拉菜单并在数据库中存储ID。

Laravel后端

// routes/web.php
Route::get('/dependent-dropdown', [DependentDropdownController::class, 'index']);
Route::post('/dependent-dropdown', [DependentDropdownController::class, 'store']);

// app/Http/Controllers/DependentDropdownController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Country;
use App\Models\State;

class DependentDropdownController extends Controller
{
    public function index()
    {
        $countries = Country::all();
        return view('dependent-dropdown', compact('countries'));
    }

    public function store(Request $request)
    {
        $validatedData = $request->validate([
            'country_id' => 'required',
            'state_id' => 'required',
        ]);

        // 存储数据到数据库
        $data = [
            'country_id' => $validatedData['country_id'],
            'state_id' => $validatedData['state_id'],
        ];

        // 保存数据到数据库
        // ...

        return redirect()->back()->with('success', 'Data saved successfully!');
    }
}

JavaScript前端

<!-- resources/views/dependent-dropdown.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dependent Dropdown</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form action="/dependent-dropdown" method="POST">
        @csrf
        <label for="country">Country:</label>
        <select id="country" name="country_id">
            <option value="">Select Country</option>
            @foreach ($countries as $country)
                <option value="{{ $country->id }}">{{ $country->name }}</option>
            @endforeach
        </select>

        <label for="state">State:</label>
        <select id="state" name="state_id">
            <option value="">Select State</option>
        </select>

        <button type="submit">Submit</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#country').change(function() {
                var countryId = $(this).val();
                $.ajax({
                    url: '/get-states',
                    method: 'GET',
                    data: { country_id: countryId },
                    success: function(response) {
                        var options = '';
                        $.each(response.states, function(key, state) {
                            options += '<option value="' + state.id + '">' + state.name + '</option>';
                        });
                        $('#state').html(options);
                    }
                });
            });
        });
    </script>
</body>
</html>