如何根据选择的下拉菜单显示特定类别

Question

我有类别表和俱乐部表，它们之间的关系是

• 一个类别有很多俱乐部
• 一个类别可以有多个俱乐部
• 1 个俱乐部有 1 个类别

我想根据类别显示俱乐部，将通过下拉列表选择，因此其他俱乐部将被隐藏。更多了解请看截图

1. 我的控制器（将类别名称添加到下拉列表中没有问题）：

    public function club()
    {
        $categories_name = Category::pluck('category_name','id'); 
        $user_id = auth()->user()->id;
        $user = User::find($user_id);
        $data = array(
            'user_clubs' => $user->clubs,
            'categories_name' => $categories_name
        );
        return view('pages.dashboard.club_dashboard')->with($data);
    }

1. 我的看法

<div class="form-group">
        <strong>{{Form::label('categories_name', 'Select Category')}}</strong>
        {{Form::select('categories_name', $categories_name, null, ['class' => 'form-control'], array('name'=>'categories_name[]'))}}
</div>

@if (count($user_clubs)>0)
<table class="table table-striped">
    <tr>

        <th><strong>Club Name</strong></th>
        <th></th>
        <th></th>
    </tr>
    @foreach ($user_clubs as $club)
    <tr>
        <th>{{$club->club_name}} | {{$club->category->category_name}} </th>
        <td><a href="/clubs-soc/lists/{{$club->id}}/edit" class="btn btn-warning">Edit</a></td>
        <td>
            {!!Form::open(['action' => ['ClubsController@destroy', $club->id], 'method' => 'POST', 'class' => 'float-right'])!!} 
            {{Form::hidden('_method','DELETE')}} 
                {{Form::submit('Delete', ['class' => 'btn btn-danger'])}} 
            {!!Form::close()!!}
        </td>
    </tr>
    @endforeach
</table>
@else
<p>You Have No posts</p>
@endif

3.类别模型

class Category extends Model
{
    public function user(){
        return $this->belongsTo('App\User');
    }

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

4.俱乐部模式

class Club extends Model
{
    public function user(){
        return $this->belongsTo('App\User');
    }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>">
    onchange alert($("#categories_name").length);
    console.log($("#categories_name").length);  
    $(document).ready(function(){
        $("#categories_name").on("change", function(){
            var category_id = $(this).val();
            $("table tr").each(function(index){
                if (index != 0) {
                    $row = $(this);
                    if ($row.attr('id')!=category_id) {
                        $row.hide();
                    }
                    else {
                        $row.show();
                    }
                }
            });
        });
    });​
</script>

我从下面的答案中编写了这个脚本，但它仍然无法正常工作，请帮我找出我在哪里犯了错误？我应该把脚本放在哪里？

Answer 1

//将类别ID添加到您的tr中

@foreach ($user_clubs as $club)
    <tr id="{{$club)->category->id}}">
        //Rest of your code
    </tr>
@endforeach

//你的jquery

$("#categories_name").on("change", function() {
    var category_id = $(this).val();

    $("table tr").each(function(index) {
        if (index != 0) {

            $row = $(this);



            if ($row.attr('id')!=category_id) {
                $row.hide();
            }
            else {
                $row.show();
            }
        }
    });
});​