@bonio89:
Przed pokazaniem Ci rozwiązania muszę Ci coś napisać. Mam nadzieję, że się nie obrazisz, bo to nic osobistego. Jeśli nawet się obrazisz, ale weźmiesz moje słowa do serca, to i tak wyjdziesz na tym na plus, więc napiszę co chcę napisać.
Tak a propos kodu, który tu wkleiłeś. Ciebie nie znam, więc o Tobie nic nie mówię. Kod jednak widzę. Słuchaj, stary. On jest beznadziejny. Totalnie. Naprawdę. Jest ogromny, nieskuteczny, zapycha łącze, jest niepoprawny. Jest naprawdę bardzo mocno do bani.
Teraz nie ma się czym przejmować... poniekąd. Tzn. inaczej. To, że początkujący koder pisze taki kod, to nie jest nic dziwnego. Ja też pisałem kiedyś gówniany kod (i nadal piszę, choć mam nadzieję, że jest on teraz nieco mniej gówniany niż kiedyś). Sęk w tym, żebyś rozpoznał, że przydałyby Ci się w pewnym miejscu umiejętności, których póki co Ci brakuje. I że jeśli chcesz pisać kod o jakiejkolwiek rozsądnej jakości, to musisz te braki uzupełnić. Tylko to się liczy. Jeśli chcesz być profesjonalistą, to musisz zdawać sobie sprawę z własnych ograniczeń i z tego, że przydałoby się rozwinąć w tym czy w innym kierunku.
Jeśli zrobiło Ci się od tego niemiło, to przepraszam. Nie o to mi chodziło. Chcę raczej zagrzać Cię do walki i zachęcić do nauki. Pokażę Ci propozycję rozwiązania tego problemu. Porównaj ją z tym, co tam masz i sam uznaj, czy warto się uczyć, czy nie. Jesteś chyba młody, na naukę masz mnóstwo czasu. Ale musisz chcieć go dobrze wykorzystać. Naturalnie możesz mieć to gdzieś, może nie wiążesz swojej przyszłości z tworzeniem stron www. W takim wypadku olej to, co tu napisałem wyżej i łap prezent. Rzadko dajemy tu praktycznie gotowe rozwiązania, ale zrobię wyjątek, bo może sama różnica w wyglądzie/ilości kodu zachęci Cię do zgłębienia JavaScriptu. Poza tym są prawie święta :).
OK więc.
Schemat HTML-a wygląda tak:
<form action="">
<input type="hidden" name="kat" id="kat" value="NAZWA_KATEGORII" />
<select name="jaki_tel" id="jaki_tel">
<option class="data-id-1">Nokya 666</option>
<option class="data-id-3">Syn Erikson</option>
<option class="data-id-5">Powinienem nauczyć się JS</option>
</select>
<img src="" id="obrazek" alt="" />
</form>
Musisz pamiętać o kilku rzeczach:
- Gdzieś na stronie, najlepiej w obrębie tego formularza, musi się znaleźć pole input[type=hidden]. Powinno mieć ustawiony atrybut id="kat" oraz atrybut value na wartość będącą nazwą kategorii (w powyższym przykładzie wpisałem tam po prostu "NAZWA_KATEGORII").
- Elementowi select z opcjami musisz dać id="jaki_tel", czyli takie samo jak atrybut name.
- Poszczególne elementy option zrobiły nam się nagle bardzo proste. Mają postać taką:
<option class="data-id-NUMER_ID_TELEFONU">NAZWA_TELEFONU</option>
W sumie w miejscu oznaczonym NAZWA_TELEFONU możesz wpisać, co chcesz. Musisz jednak pamiętać, żeby każde option miało atrybut class. Wartość tego atrybutu powinna być dokładnie taka: słowo "data", myślnik, słowo "id", myślnik i liczba oznaczająca numer id telefonu. Jak np. wcześniej miałeś telefon "ZTE S302 1 zł" i on miał numer id 57, to zamiast tego, co miałeś:
<!--- tak miałeś -->
<option>
<script type="text/javascript" LANGUAGE="JavaScript" onclick="show56()">
function show56()
{
var id="57"
var kat="rozmowna_do_wszystkich"
document.getElementById("obrazek").src="images/"+kat+"/"+id+".gif";
}
document.write("<span onclick='show56()'>ZTE S302 1 zł</span>")
</script>
</option>
Piszesz po prostu tę jedną linijkę:
<option class="data-id-57">ZTE S302 1 zł</option>
Tak, samo to wystarczy.
Taki wygląd kodu sprawia, że wszystkie niezbędne dane znajdują się w kodzie HTML. Teraz zewnętrzny plik JavaScript może odczytać te dane, podczas gdy on sam (tzn. sam skrypt JS) jest stały. Poniższy kod JavaScript umieść w jakimś pliku np. o nazwie "podglad_telefonu.js":
function init_select_with_image_preview(select, img, category) {
if (select && img && category) {
select.onchange = function() {
var option = select.options[select.selectedIndex]
, src = '' // tu ew. ustaw domyślny obrazek, ew. z komunikatem "podgląd niedostępny"
, id_matches = null
;
if (option) {
id_matches = /(?:^|\s)data-id-(\d+)(?:\s|$)/.exec(option.className);
if (id_matches && typeof id_matches[1] !== 'undefined') {
src = 'images/' + category + '/' + id_matches[1] + '.gif'
}
}
img.src = src;
};
select.onchange();
}
}
var select = document.getElementById('jaki_tel')
, img = document.getElementById('obrazek')
, category = (document.getElementById('kat')||{}).value || null
;
init_select_with_image_preview(select, img, category);
Następnie NA DOLE DOKUMENTU HTML, zaraz przed zamknięciem taga <body>, dołącz ten plik ze skryptem. Zrób to w poniższy sposób (zamieszczam jeszcze końcówkę dokumentu, czyli zamknięcie tagów body i html, żebyś widział jak to wstawić):
<script type="text/javascript" src="podglad_telefonu.js"></script>
</body>
</html>
I tyle. Powinno działać. Skrypt w JS jest napisany jako w miarę reużywalny, czyli jest odrobinę większy niż mógłby być. Ale jest na tyle mały, że to nie problem.
Wymyśliłem, żeby przechowywać wartości id telefonów w atrybucie class elementów option. To IMO dobry sposób. Wartość id jest w atrybucie class poprzedzona prefixem "data-id-" żeby nie kolidowała z niczym innym. Poza tym to jest pewna konwencja z HTML-a 5, który jeszcze się nie ukazał. Skrypt odczytuje atrybut class w sposób prawidłowy, czyli jakbyś chciał do niektórych elementów option dodać jeszcze jakąś inna klasę, to dodaj ją śmiało po spacji -- skrypt i tak wyłuska sobie to ID.
Wymusiłem też na Tobie, byś dodał do dokumentu parę ID. W sumie ta reużywalna część skryptu tego nie wymaga. Część inicjalizacyjna zaś mogłaby użyć innych danych niż ID elementu i normalnie używanie samego getElementById wynika często z nieznajomości innych metod DOM. Ja je znam, ale specjalnie wstawiłem Ci tam ID, bo na stronie ID powinno być unikalne. Gdybyś już gdzieś miał ID "kat" w innym miejscu, to walidator (którego pewnie nie używasz...) Cię przed tym ostrzeże.
Podałem Ci jedynie wymagania odnośnie HTML-a. Nie napiszę Ci kodu PHP, który Ci taki HTML wygeneruje. To zadanie dla Ciebie, ale myślę, że w PHP sobie akurat radzisz, więc nie powinien to być dla Ciebie problem.
Ważniejsze zagadnienia związane z JavaScriptem użyte w tym rozwiązaniu:
-DOM (Document Object Model),
-funkcje anonimowe,
-wyrażenia regularne,
-nietypowe właściwości operatorów || i &&.
Do nauki JavaScriptu polecam książkę "JavaScript -- Mocne strony" Douglasa Crockforda. Będzie tam wszystko to, co powyżej oprócz DOM, który możesz sobie pogooglować.
Jak coś nie działa, to piszcz. Wklej tylko wygenerowany kod HTML żebym zobaczył, czy spełnia wymagania, o których pisałem. Skrypt testowałem w Firefoxie, Operze i IE i wszystko powinno być OK, ale testowałem na sucho, nawet bez przykładowych obrazków.
