在 Laravel 中创建一个动态创建另一个下拉列表的下拉列表

Question

我是 Laravel 的新手（我喜欢它！）我正在尝试做一些复杂的事情：创建一个下拉菜单，在选择一个选项时 - 将显示第二个下拉菜单将根据先前的选择动态地提供更多选项。

我的控制器如下所示：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Manufacturer;
use App\GearCategory;
use App\SubCategory;
use App\GearItem;

class GearItemController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth'); 
    }

    public function create(Manufacturer $manufacturers, GearItem $gearItem, GearCategory $gearCategory, SubCategory $subCategory)
    {
        // dd($gearCategory->all());
        $catNum = 6; // <-- needs to be equal to the dispaly div name. Hard coded as 6 for test purposes. 
        $gearCategory = $gearCategory->all();
        $subCategory = $subCategory::where('gear_categories_id', $catNum)->get();
        $manufacturers = $manufacturers->all();


        return view('gearitem.create', compact('gearCategory'), compact('subCategory'), compact('manufacturers'),  compact('gearItem'));
    }
}

我的刀片是这样的：

  <div class="card-header">
                    <h3>Add a new gear Item</h3>

                </div>
                <div class="container">
                    <select name="gear_categories_id" id="gear_categories_id" class="custom-select mb-3 mt-3"
                        onchange="selector('display_div', this)">
                        <option value="" selected>Choose category</option>
                        @foreach ($gearCategory as $category)
                        <option id="cat_selector" value="{{ $category->id  }}"
                            {{ (old("gear_categories_id") == $category->id ? "selected" : "") }}>{{ $category->name }}
                        </option>

                        @endforeach
                    </select>
                </div>


                <script>
                    "use strict"
                    function selector(divId, element) {

                        console.log(element.value);

                        document.getElementById(divId).setAttribute("name", element.value)

                    }
                </script>



                    <div class="display_div container" id="display_div" name="">

                    <select name="sub_categories_id" id="sub_categories_id" class="custom-select mb-3 mt-3"
                    onchange="selector('display_div', this)">
                    <option value="" selected>Choose item's type</option>
                    @foreach ($subCategory as $scategory)
                    <option id="cat_selector" value="{{ $scategory->id }}"
                        {{ (old("sub_categories_id") == $scategory->id ? "selected" : "") }}>{{ $scategory->name }}
                    </option>
                    @endforeach
                </select>

                </div>

（对不起，我还没有进入 Vue...）我正在尝试将“display_div”的名称传递给控制器​​中的 $catNum 变量（设置为“6”只是为了测试它是否有效，但应设置为用户在第一个下拉列表中选择的任何内容）“gear_categories_id”的值在子类别模型中显示为外键，如果我能设法将这些值提供给第二个下拉列表会工作。我已经为此苦苦挣扎了好几个小时，但我无法弄清楚...请帮助并为成为这样的 n00b 感到抱歉。

Answer 1

您可以使用AJAX 请求更改父类别下拉列表来填充子类别。请参阅下面的代码。我添加了第二条路线来获取特定categoryID 的subCategories。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Manufacturer;
use App\GearCategory;
use App\SubCategory;
use App\GearItem;

class GearItemController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth'); 
    }

    public function create(Manufacturer $manufacturers, GearItem $gearItem, GearCategory $gearCategory, SubCategory $subCategory)
    {
        // dd($gearCategory->all());
        $catNum = 6; // <-- needs to be equal to the dispaly div name. Hard coded as 6 for test purposes. 
        $gearCategory = $gearCategory->all();
        $subCategory = $subCategory::where('gear_categories_id', $catNum)->get();
        $manufacturers = $manufacturers->all();


        return view('gearitem.create', compact('gearCategory'), compact('subCategory'), compact('manufacturers'),  compact('gearItem'));
    }

    public function getSubCategories($categoryID) {
        return  SubCategory::where('gear_categories_id', $categoryID)->get();
    }
}

Route::get('/sub-categories/{categoryID}', 'GearItemController@getSubCategories');

<div class="card-header">
    <h3>Add a new gear Item</h3>
</div>
<div class="container">
    <select name="gear_categories_id" id="gear_categories_id" class="custom-select mb-3 mt-3"
        onchange="selector('display_div', this)">
        <option value="" selected>Choose category</option>
        @foreach ($gearCategory as $category)
        <option id="cat_selector" value="{{ $category->id  }}"
            {{ (old("gear_categories_id") == $category->id ? "selected" : "") }}>{{ $category->name }}
        </option>

        @endforeach
    </select>
</div>


    <script>
        "use strict"
        function selector(divId, element) {

            console.log(element.value);

            document.getElementById(divId).setAttribute("name", element.value);


            fetch('/sub-categories/')
            .then(res => res.json())
            .then(subCategories => {
                var options = subCategories.reduce( (opts, cat) => 
                    `${opts}<option value="${cat.id}">${cat.name}</option>`, "");
                document.getElementById("sub_categories_id").innerHTML = `<option value="" selected>Choose item's type</option>${options}`;
            });

        }
    </script>



<div class="display_div container" id="display_div" name="">

    <select name="sub_categories_id" id="sub_categories_id" class="custom-select mb-3 mt-3"
        onchange="selector('display_div', this)">
        <option value="" selected>Choose item's type</option>
    </select>

</div>