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());
});

但是问题是：

以上解决方案仅在href中的dropdown-menu（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>

同时，我在foreach过滤器中有一个Author循环，导致用户数量不固定。因此，我无法使用与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>

在下拉标题

2 个答案: