Filtrowanie po wielu dropdownach w Javascript

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!

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

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

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

a nie

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

Czy to jakaś forma event delegation w jquery?

4
Gouda105 napisał(a):
$('#roleDropdown').on("change", callback)

a nie

$('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

$('#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

$('#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.

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

//

document.body.addEventListener('change', function (event) {
  if (event.target.id === 'roleDropdown') {
    callback(event);
  }
})

1 użytkowników online, w tym zalogowanych: 0, gości: 1