[html/JS] listy rozwijalne

0

Witam,
mam taki problem, otóż mam dwie listy rozwijalne, przyjmijmy, że wyglądają tak:

<select>
<option>A</option>
<option>A</option>
</select>


<select>
<option>A1</option>
<option>A2</option>
<option>B1</option>
<option>B2</option>
</select>

i chcę, żeby po wybraniu w pierwszej liście opcji "A" w drugiej wyświetlało się tylko "A1" i "A2", analogicznie z opcją "B". Nie chodzi mi o gotowe rozwiązanie, tylko bardziej na naprowadzenie na dobrą drogę, bo nie mam kompletnie koncepcji jak to zrobić, po prostu pustka w głowie.

PS. byleby nie JQuery, bo tego nie rozkminiam

0

na onchange w select1 musisz przefiltrowac select2
teraz jak przefiltrowac

  1. mozna wylaczac niektore opcje, ustawiajac im atrybut disabled="disabled"
  2. mozna wyczyscic select2 i dodac tylko odpowiednie wartosci, oczywiscie musisz miec w js jakas tablice (inna strukture), z ktorej wyciagniesz dla okreslonej wartosci z select1 liste wartosci do select2
    na obiekcje select bedziesz mial metody add i remove, do manipulacji lista options
0

PS. byleby nie JQuery, bo tego nie rozkminiam

cool, tylko, że w jQuery jak się uprzesz to zrobisz w 4 linijkach (i jest to logiczne)
a w "czystym" JS - pewnie z 50 (wciąż jest logiczne, ale niepotrzebnie długie i gwarantuję Ci, że tego dopiero nie "rozkminisz")

nie przepadam za frameworkami PHP (faktem jest, że nie wchodziłem z nimi w bliższe stosunki), ale bez jQuery nie wyobrażam sobie żadnej bardziej złożonej stronki z elementami JS - czasem w 10 minut zrobisz to co normalnie w parę godzin.

0

Ja sobie wyobrażam stronę bez jQuery. Sam taką piszę, ale tam używam Prototype, które jak na mój gust ma to fajniejsze, że jest to rozbite na większą ilość części przez co przeglądarce się chyba troszkę łatwiej cache'uje.

0

To jest kwestia bezdyskusyjna: można tworzyć skrypty dla strony nie korzystając z jQuery czy jakiegokolwiek innego frameworka. To teraz coś się niektórym najwyraźniej popieprzyło, skoro mówią, że "programują w jQuery" i w ogóle zaczynają naukę "JavaScriptu" od nauki tejże biblioteki. Nie tędy droga do tworzenia profesjonalnego kodu.

Tworząc stronę, trzeba rozważyć plusy i minusy i wybrać najlepsze (lub chociaż "wystarczająco dobre") rozwiązanie. jQuery po skompresowaniu zajmuje kilkadziesiąt kilobajtów. Z gzipem bywa różnie: nie zawsze jest włączony (a nie my odpowiadamy za serwer), a poza tym nawet gdy jest, to niektóre proxy ISP nie pozwalają na gzipa. Tak czy siak, jQuery to nie jest kilkanaście linii, tylko kilkadziesiąt kilobajtów plus kilkanaście linii.

A może nie zależy nam tak bardzo na jakości strony, tj. szybkości ładowania i podstawowym ograniczeniem jest czas? Wtedy nawet do małej pierdoły możemy użyć jQuery. Natomiast jeśli na stronie jest dużo skryptów, które łatwiej by było zrobić z jQuery lub innym frameworkiem, to prawie na bank należy frameworka użyć -- oszczędzony czas przeważy nad parunastoma czy parudziesięcioma kilobajtami zysku.

W przypadku problemu z tego tematu jQuery chyba nawet za wiele by nie ułatwiło, jak tak sobie myślę. Główny problem polega tu na stworzeniu struktur reprezentujących zależności pomiędzy selectami. jQuery tu specjalnie nie pomoże. jQuery wybitnie pomogłoby przy DOM. Tu nie ma zaawansowanych rzeczy związanych z DOM. Tym selectom w naturalny sposób "należy się" ID, a getElementById jest prościusieńka w użyciu. Do tego trzeba by dodać jakąś pętlę po opcjach, przy czym HTML DOM na dość wygodne rozszerzenia pozwalające na manipulowanie opcjami (select.options). Manipulowanie zdarzeniami też jest tu proste, a funkcje addEventListener w wersji cross-browser każdy powinien tak czy siak mieć w swojej biblioteczce (a od biedy można użyć zwykłego, ruskiego onchange i tyle).

Alternatywnym w stosunku do struktury danych rozwiązaniem jest odpowiednie oznaczenie opcji w selectach. Np. można dać im klasę postaci 'requires-X', gdzie X to np. indeks/nazwa/wartość opcji w pierwszym polu. Potem po zdarzeniu change należy zostawić w drugim selekcie tylko pola o odpowiedniej klasie. Ponownie: można w prosty sposób sprawdzić className, lub -- bardziej ortogonalnie -- użyć jakiejś dwulinijkowej funkcji hasClass, którą również każdy powinien mieć w swojej biblioteczce.

To ostatnie rozwiązanie, z parsowaniem klas, może się wydawać skomplikowane, ale ma tę zaletę, że jest ortogonalne (jeśli użyjemy hasClass i x-browser addEventListener) i dobrze współgra z zasadą DRY. Kod po stronie serwera generuje oba selecty i -- poprzez klasy -- definiuje w HTML-u zależności pomiędzy selectami. Żeby zmienić selecty -- np. dodać jakąś opcję w drugim z nich -- trzeba tylko zmienić kod po stronie serwera. Kod JavaScript sam odczyta te zmiany i dostosuje do nich swoje działanie.

Ponownie, trzeba wybrać najlepsze rozwiązanie biorąc pod uwagę różne czynniki -- nie zawsze jakość ma najwyższy priorytet. Sporo też zależy od umiejętności programisty. O ile ktoś bardziej ogarnięty napisze kod JavaScript z DOM w czasie tylko o np. 50% dłuższym niż przy użyciu jQuery (tylko 50%, bo nie ma tu skomplikowanych manipulacji DOM), o tyle ktoś kto "programuje w jQuery" [i tylko tyle] kodowałby to na piechotkę np. o 500-1000% dłużej niż z jQuery.

Co do "rozkminiania" i "nie rozkminiania" -- jeśli ktoś nie potrafi ogarnąć prostego używania (niewygodnego) interfejsu DOM, to nie będzie rozkminiał też jak działa jQuery. Różnica jest taka, że albo sam napisze odpowiedni kod, odpowiednie funkcje -- a więc jakoś je rozkmini -- albo całkowicie oleje rozkminianie i będzie po prostu wierzył, że to jQuery jakoś tam działa.

0

@PatrykTI jesli nie radzisz sobie z js to mozesz jeszcze uzyc optgroup i miec tylko jeden select :) http://www.w3schools.com/tags/tag_optgroup.asp

0

@winerfresh
napisałem "bardziej złożonej stronki z elementami JS" - a nie, że każdej, tak samo źle chyba mnie zrozumiał bswierczynski..
na prostszych po prostu się pisze parę własnych funkcji zastępujących te "elementy jQuery", które potrzebujemy.

@bswierczynski:
samo ładowanie 70kb js-a przy portalu, który i tak ładuje 2MB contentu nie dużo zmieni, a jak dodatkowo użyjemy tego jQuery co google hostuje - to b. duża szansa, że i tak użytkownik ma w cache'u, rozmiar jest jeszcze mniejszy i odpada request do tej samej domeny = bez różnicy.. z nadużywaniem jQuery/frameworków masz rację.

0

o Optgroup już myślałem, i chyba tak też zrobię...
A co do jQuery, to mógłby ktoś coś przykładowego skrobnąc na szybko? xD Nie znam tego prawie w ogóle, ale jak zobaczę jakiś kod to już chyba dam radę xD

0

na jQuery.com masz dokumentacje, tam ci juz skrobneli wszystko czego potrzebujesz na poczatek
zgadam sie z dzek69 ze 26KB skrytp przy dzisiejszych laczach to pikus w porownaniu z niezoptymalizowana grafika, ktora dopiero masakruje stronke
i faktycznie dobrze uzywac jquery z CDN (googla lub microsoftu)

0
dzek69 napisał(a)

samo ładowanie 70kb js-a przy portalu, który i tak ładuje 2MB contentu nie dużo zmieni

A jeśli masz całkiem złożoną i sporą stronkę na mniej niż 30 kilobajtów, jak pornel, to zmieni bardzo dużo :P.

Jeśli nawet masz witrynę domową Google z dość skomplikowanymi skryptami (teraz jest to dynamiczne ładowanie) i pewną ilością grafik (sprite'y CSS), to i tak Twoja strona zajmuje 134 KB i jQuery to kwestia 50% tego rozmiaru.

Użycie zewnętrznego CDN zwykle mocno polepsza wydajność i jest fajne, ale też nie zawsze. Jeśli tworzysz jakąś witrynę, gdzie konieczny jest bardzo wysoki poziom bezpieczeństwa, np. witrynę banku z internetowymi kontami, to możesz nie chcieć wprowadzać na swoją stronę hotlinka do kodu z zewnętrznej firmy (!). Poza tym, w tych CDN nie ma chyba SSL, które generalnie jest na bezpiecznych witrynach koniecznością, a z importowaniem zasobów nie-SSL do witryny z SSL wiążą się kolejne komplikacje.

Yahoo kiedyś napisali coś takiego na temat cache'u:
"40-60% of Yahoo!’s users have an empty cache experience and ~20% of all page views are done with an empty cache."
(http://yuiblog.com/blog/2007/01/04/performance-research-part-2/)

Czyli około połowy pierwszych wyświetleń witryny Yahoo następuje z "pustym cachem" (potem większości się to już cache'uje, więc w sumie jedynie 20% odsłon jest bez cache'a). Co to znaczy z "pustym cachem" -- nie wiem do końca. Pusty cache oznacza... pusty cache, czyli stan, w którym w pamięci podręcznej przeglądarki nie znajduje się NIC. Może jednak jest tu nieścisłość i chodzi jedynie o zasoby pochodzące z Yahoo. Z drugiej strony, może pewna liczba użytkowników ma po prostu wyłączony cache lub często go czyści.

massther napisał(a)

zgadam sie z dzek69 ze 26KB skrytp przy dzisiejszych laczach to pikus w porownaniu z niezoptymalizowana grafika, ktora dopiero masakruje stronke

Nie 26, tylko 76 KB przy braku GZIP-a, a dla ilu Twoich użytkowników GZIP jest niedostępny, to byś musiał już sam sobie przetestować.

Faktycznie, jeśli strona ma niezoptymalizowaną grafikę, to jak najbardziej może ona przeważać nad skryptami i pewnie często tak się dzieje. Oznacza to, że trzeba w pierwszej kolejności zoptymalizować grafikę. Wydajność w zasadzie zawsze należy zwiększać, zaczynając od wąskich gardeł.

Robiłem jakiś czas temu stosunkowo niewielką witrynę firmową. Miało tam być trochę skryptów, ale nic aż tak kosmicznego. Skrypty walidacyjne formularza, jakieś "accordiony", pomniejsze bajery i nawet canvas/filtr dla paru obrazków, bo grafik wymyślił, żeby obrazki w takiej jakby galerii były czarno białe i stawały się kolorowe dopiero po najechaniu myszą (transformacja do cz-b w JS jest już lepsza niż zrobienie tego po stronie serwera oraz ściąganie dwóch wersji obrazków...). I niby taka niepozorna stronka, niby obrazków całkiem sporo (ale udało mi się je dobrze zoptymalizować), a skrypt zajęły z tego 30-50% zależnie od podstrony, przy czym cała podstrona miała w granicach 200 KB.

Akurat tutaj użyłem jQuery (z pluginem do obsługi formularzy), bo koszt i czas produkcji witryny były bardziej krytycznymi zasobami niż przewidywana wydajność, która i tak wypadła obiektywnie OK, a na tle konkurencji tym bardziej (wyprzedzenie większości polskich webdeveloperów naprawdę nie jest specjalnie trudne...).

To ponownie ma podkreślić tezę, że wyboru należy dokonywać świadomie i nie zawsze należy rzucać się na jQuery. W tym topicu jQuery nie byłoby chyba AŻ TAK przydatne (z tego co widzę). Wystarczyłaby pewnie drobna ilość podstawowych, dostępnych w necie funkcji (addEventListener, hasClass itp.). Logikę trzeba i tak napisać, Ajaxu czy animacji nie ma tu w ogóle, a manipulacje DOM są tylko podstawowe. Nie bójmy się napisać jednej czy dwóch pętli for.

0

w pelni sie zgadzam ze nalezy swiadomie wybierac narzedzia do odpowiednich zadan i faktycznie tu nie ma sensu uzywac jquery, dlatego tez autorowi watku nie probowalem tego sugerowac, zwlaszcza ze napisal ze nie ogarnia jquery
chybaze jak zauwazyles wymiatalby w jquery tak ze klepniecie tego zajeloby mu minutke (ale wtedy nie potrzebowalby pytac o porade :))
ja z uporem maniaka czesto powtarzam, ze dobre podstawy teoretyczne w programowaniu (w kazdej dziedzinie) daja duza przewage nad osobami, ktore maja za soba tylko praktyke i po lebkach liznieta teorie z jakis tutoriali etc., bo te teoretyczne braki bardzo szybko wychodza
wiec uczenie jquery bez znajomosci podstaw javascript jest jakas pomylka, ale coz co uczelnia/wykladowca to obyczaj

0

@bswierczynski, z tym linkowaniem w systemie bankowym do plików 'na zewnątrz" to już prawie obraza moich uczuć :P
mimo, że wpomniałem o tym googlowskim hostowaniu jquery to nie korzystam z tego z dwóch powodów:

  1. mój kochany internet w domu. piszę coś na localhoście, nagle nie ma neta, i jest problem, bo przeglądarka musi swoje "przestać" próbując uzyskać jakiś nagłówek i dopiero potem leci z cache'a.
  2. bezpieczeństwo. google też zdarzają się wpadki. dopisać parę linijek do takiego jquery - i ciasteczka (+może coś więcej) z wszystkich stron korzystających z dobrodziejstw google cdn polecą do jakiegoś hackiera.. a przez tydzień się pewnie nikt nie skapnie o małym dodatku do jquery ;)
0

@dzek69:
Obie uwagi uważam osobiście za słuszne. Też mnie to wkurza, gdy tworzę stronę na localhoście. Pisałem kiedyś nawet takiego małego switcha (czy to był parser?), dzięki któremu mogłem sobie jednym kliknięciem/zmianą stałej sprawić, że jQuery leci już nie z localhosta, tylko z googlowego CDN (co praktycznie zawsze faktycznie przyspiesza stronę, ale nie na localhoście).

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