在下拉标题中显示所选选项（不同的 href）

Question

我正在处理我的 Laravel 项目，我想为我的数据表制作一些过滤器按钮。

这些按钮看起来像这样：https://i.stack.imgur.com/Swpbw.png

我想在下拉标题中显示所选选项。例如，在从下拉按钮中选择选项后，应将 Author 标题更改为任何其他名称，例如 Admin 或 User 等。

作者下拉按钮（原版）：

<div class="dropdown">

    <button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Author
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        @foreach($users as $user)
            <a class="dropdown-item" href="/posts?user_id={{$user->id}}">
                {{ $user->name }}
            </a>
        @endforeach
    </div>

</div>

我找到了一些解决方案，它们都是这样的：

$(".dropdown-menu").on('click', 'a', function(){
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});

但问题是：

上述解决方案仅在来自dropdown-menu 的href (url) 是固定的(href="#") 时有效。

在我的项目中，这些下拉菜单有不同的href，所以标题只能在点击后短暂更改，然后在url更改后恢复默认值。

我认为我们需要捕获 url 然后设置一些条件来显示正确的标题。

例如，我的Category 过滤器只有 3 个固定选项，所以我可以这样做。

类别下拉按钮：

@php
    $request = Request::getRequestUri();
@endphp

<div class="dropdown">

    <button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        @switch(true)

            @case(strstr($request, 'category_id=1'))
                Pc
                @break

            @case(strstr($request, 'category_id=2'))
                Console
                @break

            @case(strstr($request, 'category_id=3'))
                Handheld
                @break

            @default
                Category

        @endswitch
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="{{strstr($request, 'category_id=1') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=1">
            Pc
        </a>
        <a class="{{strstr($request, 'category_id=2') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=2">
            Console
        </a>
        <a class="{{strstr($request, 'category_id=3') ? 'dropdown-item active' : 'dropdown-item'}}" href="/posts?category_id=3">
            Handheld
        </a>
    </div>

</div>

同时，我在Author 过滤器中有一个foreach 循环，导致用户数量不固定。所以我不能使用与Category 相同的代码。

我试过这个，但它不起作用。

作者下拉按钮（无效）：

<div class="dropdown">

    <button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        @if($request == '/posts' OR strstr($request, 'posts?page='))
            Author
        @else
            @foreach($users as $user)
                @if(strstr($request, 'user_id={{$user->id}}'))
                    {{ $user->name }}
                @endif
            @endforeach
        @endif
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        @foreach($users as $user)
            <a class="dropdown-item" href="/posts?user_id={{$user->id}}">
                {{ $user->name }}
            </a>
        @endforeach
    </div>

</div>

点击时无法在标题上显示用户名（空白结果）。

我也试过这个，但也没有用。

@foreach($users as $user)
    @if($request == "/posts?user_id={{$user->id}}"))
        {{ $user->name }}
    @endif
@endforeach

请大家帮忙！

Answer 1

你仍然可以通过防止链接重定向来使用JS解决方案

$(".dropdown-menu").on('click', 'a', function(event){
    event.preventDefault();
    event.stopPropagation();
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});

Answer 2

我找到了解决办法。

if 条件（在foreach 内）是正确的，但不知何故它在刀片模板中不起作用。

所以，把它放在php部分就行了。

作者下拉按钮（有效）：

<div class="dropdown">

    <button class="btn btn-outline-dark btn-sm dropdown-toggle mr-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        @if($request == '/posts'
            OR strstr($request, 'posts?search=') 
            OR strstr($request, 'posts?page='))
            Author
        @else
            @foreach($users as $user)
                @php
                    if(strstr($request, 'user_id='.$user->id)){
                        echo $user->name;
                    }
                @endphp
            @endforeach
        @endif
    </button>

    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        @foreach($users as $user)
            <a class="dropdown-item" href="/posts?user_id={{$user->id}}">
                {{ $user->name }}
            </a>
        @endforeach
    </div>

</div>