What is the way to filter dropdowns after selections?

Let's say I group the db table by 3 hierarchy levels: group, branch, unit Now I have a few hundreds of rows grouped by the above.

I now make 3 dropdowns with multiple selection for each - groups, branches, units. I want that if a selection is made on either of them, it will filter out only what's belonging to them.

Example data:

group | branch | unit
------|--------|-----
  g1  |   b1   |  u1
  g1  |   b1   |  u2
  g2  |   b2   |  u3
  g3  |   b7   |  u4

So if someone selects b1 from the branches dropdown, the other dropdowns will change accordingly and then the groups dropdown will display only g1 as selected and units dropdown will only show u1 and u2 as the available options to select.

Is there anything I need to do on the data from the db? Or anything else?

I'm talking on the general idea of how to filter the results, not how to do that exactly. Like what are the general things I need to use here

jaseofspades88

3 years ago

Level 51

Presumably these are filtering a top level collection of data. Once you apply these filters you can pluck these filter values from that other filtered collection and then filter down these lists. I appreciate it sounds complicated but hopefully this example explains.

$users = User::query()
    ->where('group', 'g1')
    ->get()

$groups = Group::query()
    ->whereIn('id', $users->pluck('group')->unique())
    ->get()

Something like this, adapt the actual queries for relationships accordingly

1 like

newbie360

3 years ago

Level 24

when selected something just go to a route and filter in backend, then render a new page ? or Livewire

1 like

Ligonsker

3 years ago

Level 8

Oh yes I know how to filter in the backend, my question is in JavaScript, how to filter the dropdowns in the frontend when I have multiple select dropdown, how do I filter results efficiently with JS?

newbie360

3 years ago

Level 24

depends on what you want to use, React / Vue / AlpineJs / Jquery / Javascript, i think you can get many demo code on internet, be careful you need limit the amount of data set, 10000 row data with use datatable in front-end not a good idea

1 like

Ligonsker

3 years ago

Level 8

@newbie360 thanks, using JS/Jquery. Yes I checked and there aren't too much rows (somewhere between 500 to 1500)

Please or to participate in this conversation.