仅在选择选项laravel中显示与类别相关的子类别

时间:2020-07-27 12:11:05

标签: jquery laravel html-select

我只想显示与以前使用laravel中的动态选择下拉列表选择的类别相关的子类别。

这是我的代码

<div class="form-group">
        <label>Category</label>
        <select id="categoryList" class="form-control" name="category_id" required>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
            @endforeach
        </select>

        <label>Subcategory</label>
        <select id="subcategoryList" class="form-control" name="subcategory_id" required>
            @foreach ($subcategories as $subcategory)
                <option value="{{ $subcategory->id }}">{{ $subcategory->name }}</option>
            @endforeach
        </select>
    </div>

任何帮助都非常感谢TIA!

已编辑*

这是类别和子类别的模型

类别

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model

{
    public $timestamps = false;

public function subcategories()
{
    return $this->hasMany('App\Subcategory');
}
}

子类别

 <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Subcategory extends Model
{
    public $timestamps = false;

    public function category()
    {
        return $this->belongsTo('App\Category', 'category_id');
    }
}

1 个答案:

答案 0 :(得分:2)

如果列表不是太大或不需要ajax,通常我会在子类别选项上添加category_id作为类,然后将其隐藏直到选择父类别。

假设您与类别的关系列为category_id,代码如下:

<label>Subcategory</label>
<select id="subcategoryList" class="form-control" name="subcategory_id" required disabled>
    @foreach ($subcategories as $subcategory)
        <option value="{{ $subcategory->id }}" class='parent-{{ $subcategory->category_id }} subcategory'>{{ $subcategory->name }}</option>
    @endforeach
</select>

这里是jQuery来做到这一点:

$('#categoryList').on('change', function () {
    $("#subcategoryList").attr('disabled', false); //enable subcategory select
    $("#subcategoryList").val("");
    $(".subcategory").attr('disabled', true); //disable all category option
    $(".subcategory").hide(); //hide all subcategory option
    $(".parent-" + $(this).val()).attr('disabled', false); //enable subcategory of selected category/parent
    $(".parent-" + $(this).val()).show(); 
});