Filtrowanie po wielu dropdownach w Javascript

Filtrowanie po wielu dropdownach w Javascript
Mateuszto
  • Rejestracja:około 7 lat
  • Ostatnio:5 miesięcy
  • Lokalizacja:Poznań
  • Postów:163
0

Hej, potrzebuję uzyskać taki efekt w vanilla js https://codepen.io/creativedev/pen/mKmEQX?editors=1010

Jakie jest najlepsze podejście żeby uzyskać taki efekt i jak podejść właściwie do tematu filtrowania po wielu dropdownach?

Dzięki chłopaki za aktywność i pomoc!

edytowany 1x, ostatnio: Mateuszto
Gouda105
  • Rejestracja:prawie 8 lat
  • Ostatnio:około miesiąc
  • Postów:487
3

https://codepen.io/zerakot/pen/QWmMbWQ?editors=1010.

Zauważyłem, że w podlinkowanym kodzie jest błąd - kiedy zmieniamy Region to wszystko się sypie. Kod chyba jest pożyczony z tej strony, więc pewnie na niej jest również odpowiedź, jak go naprawić.

Tak sobie przeglądam Twoje wcześniejsze posty i coś mi mówi, że jesteś tym typem programisty, który zaczyna naukę od frameworków nie znając dokładnie samego języka. Mam rację?

Obok mojej odpowiedzi możesz kliknąć łapkę w górę i ptaszka, żeby pokazać innym, że jest dobra. O tam ----->

edytowany 3x, ostatnio: Gouda105
Mateuszto
Napisałem już sobie wczoraj podobny przykład i chodziło mi bardziej o podejście do tego, końcowo i tak muśże to napisać we vue gdzie generuje dropdowny i rozpatrzyłem to w taki sposób i chyba będzie git, przykład który wysłałem jest statyczny i wadliwy https://stackblitz.com/edit/js-fsespw?file=index.js
Gouda105
Nie wiem o co ci chodzi, ale w podesłanym kodzie masz błąd -> metoda filter powinna zwracać true/false. U ciebie zwraca obiekt. Chyba pomyliło Ci się z map.
Mateuszto
Zwraca wartości czyli w pewnym sensie true, nie jest to dobry zabieg czytelności? Powinienem użyć po prostu return true?
Gouda105
Teraz Ci nie powiem bo zmieniłeś kod. Jednak w dokumentacji jest Metoda filter wykonuje dostarczoną funkcję callback dla każdego elementu tablicy, tworząc nową tablicę z wszystkich tych elementów, dla których funkcja callback zwróciła wartość true..
cerrato
Moderator Kariera
  • Rejestracja:około 7 lat
  • Ostatnio:2 dni
  • Lokalizacja:Poznań
  • Postów:8802
2

Za bardzo nie rozumiem pytania.

  1. Dajesz link do gotowego/działającego/wzorcowego rozwiązania. Nie możesz podejrzeć, jak tam jest to zrobione?
  2. Tak na logikę - po prostu musisz zareagować na zmiany któregokolwiek pola/edita/dropdowna/jakiejkolwiek innej kontrolki przez użytkownika, następnie filtrujesz posiadane dane tak, aby były zgodne one z kryteriami określonymi przez usera i tyle. W czym masz konkretnie problem?

Mateuszto
Chodzi bardziej o podejście do tematu, chciałbym rozwiązanie które byłoby bardziej dynamiczne a to które wysłałem jest lekko napisane na 'pałe' problem rozwiązany końcowo
Gouda105
  • Rejestracja:prawie 8 lat
  • Ostatnio:około miesiąc
  • Postów:487
1

@cerrato:
Idąc najmniejszą linią oporu to nawet myśleć nie trzeba. Całe przetwarzanie danych gotowe. Wystarczy podmienić listenery i z tego co pamiętam pobieranie wartości. Wpisać w internety jak zrobić z $("body")... vanillowy kod.
Jednak mam takie szybkie pytanie - z tego co musnąłem jQuery to wydawało mi się, że robi się

Kopiuj
$('#roleDropdown').on("change", callback)

a nie

Kopiuj
$('body').on("change", '#roleDropdown', callback)

Czy to jakaś forma event delegation w jquery?

edytowany 1x, ostatnio: Gouda105
Xarviel
  • Rejestracja:ponad 3 lata
  • Ostatnio:2 dni
  • Postów:847
4
Gouda105 napisał(a):
Kopiuj
$('#roleDropdown').on("change", callback)

a nie

Kopiuj
$('body').on("change", '#roleDropdown', callback)

Czy to jakaś forma event delegation w jquery?

Pierwsza wersja przypisuje event bezpośrednio do znacznika z selektora (może to być ID, klasa, dowolny selektor css), natomiast druga wersja bezpośrednio do body i różnica polega na tym, że jeśli skasujemy dany znacznik z DOM i dodamy go jeszcze raz od nowa

Kopiuj
$('#roleDropdown`).remove(); 
$('body').append('<div id="roleDropdown"></div>'); 

// lub normalnie bez jQuery

document.querySelector('#roleDropdown').remove();
const div = document.createElement('div'); 
div.id = 'roleDropdown'; 
document.body.append(div);

to jeśli skorzystaliśmy z pierwszej wersji

Kopiuj
$('#roleDropdown').on("change", callback)

//

roleDropdown.addEventListener('change', callback);

to przypięty event nam "przepadnie" i przy stworzeniu nowy znacznik nie będzie posiadał żadnych eventów. Trzeba będzie dodać je jeszcze raz od nowa.

Przy drugim sposobie event nie zostaje skasowany, ponieważ przypisaliśmy go gdzieś wyżej w strukturze DOM.

Kopiuj
$('body').on("change", '#roleDropdown', callback)

//

document.body.addEventListener('change', function (event) {
  if (event.target.id === 'roleDropdown') {
    callback(event);
  }
})
edytowany 1x, ostatnio: Xarviel
Gouda105
Wydaje mi się, że w jego kodzie lepiej użyć jednorazowego przypisania ze względu na wydajność. Różnicy w czytelności kodu moim zdaniem nie ma, a kilka ms wydajności może być na plus (jeśli mam rację). Bo nie nasłuchujemy całego body, tylko jeden element.
Xarviel
Dokładnie, masz rację, w taki sposób byłoby lepiej. Jeśli już z czegoś takiego korzystamy to element do którego to przypisujemy powinien być jak "najblizej" pozostałych elementów, tak żeby event nie lecial niepotrzebnie przez cały html. Przykładowo jak mamy grupę znaczników select tak jak u autora <div id="filters"><select>...</select><select>...</select></div> to moglibyśmy to przypisać divowi, który je grupuje zamiast do body.
Gouda105
Jeszcze jedno pytanie - w jakich przypadkach na body może być uruchamiane zdarzenie onChange? Tylko przy zmianie jakiegoś inputa?
Xarviel
@Gouda105 Domyślnie znacznik body nie może "sam z siebie" wywołać zdarzenia onChange, tak jak robią to pola formularza input / textarea / select, oczywiście pomijając sztuczne wywołanie jakiegokolwiek eventu przez np dispatchEvent https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent . Ale istnieje możliwość, żeby takie zdarzenie przechwycić z innego źródła (tak jak w przykładzie autora, zmieniamy wartość znacznika select, on wywołuje event change, a body go przechwytuje) i coś z nim zrobić https://javascript.info/bubbling-and-capturing
Gouda105
Dziękuję za opdowiedzi.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.