Display Selected Option (different href) in Dropdown Title

Question

Im working on my Laravel project, and i wanna make some filter buttons for my data table.

Those buttons look like this : https://i.sstatic.net/Swpbw.png

I want to display the selected option in dropdown title. For example, the Author title should be changed to any others name like Admin or User etc... after selecting the option from the dropdown button.

Author Dropdown Button (original) :

<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>

I found some solutions, they all look like this :

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

But the problem is :

The solution above only works if the href (url) from dropdown-menu is fixed (href="#").

In my project, those dropdowns have different href, so the title can only be changed for a short moment after clicked, then back to default after the url changed.

I think we need to catch the url then make some conditions to display the correct title.

For example, my Category filter only have 3 fixed options so i can do it like this.

Category Dropdown Button :

@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>

Meanwhile, i have a foreach loop in the Author filter, cause the number of users is not fixed. So i cannot use the same code like i did with Category.

I had tried this but it just doesn't work.

Author Dropdown Button (not working) :

<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>

It cannot display the user name on title when clicked (blank result).

I also tried this one, but not working either.

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

Please help guys !

Answer 1

I've found the solution.

The if condition (inside the foreach) is right, but somehow it doesn't work in blade template.

So, just put it in the php section.

Author Dropdown Button (working) :

<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>