[HTML]Obraze w/przy select Opcje

[kamilos809]

Witam,
Moim problemem jest kod <select>. Znaczy wiadomo, kod prosty jednak nie do końca, gdyż chciałbym najlepiej żeby był obrazek przy tekście w select, czyli
np.

[HTML] pobierz, plaintext 
<select name="test">
<option value="wartość"><img src"obrazek.jpg">Nazwa 1</option>
</select>
[HTML] pobierz, plaintext 

Niestety jak wiadomo to tak nie działa. Widziałem różne kody jQuery, jednak nijak nie umiem ich użyć, za każdym razem nic takiego nie widać jak pokazują na przykładzie.

Znalazłem prostszy sposób, który też mnie satysfakcjonuje, jednak nie do końca.

[HTML] pobierz, plaintext 
<select name="test" onchange="document.getElementById('avatar').src=id">
    <option value="test1.gif">Test 1</option>
    <option value="test2.gif">Test 2</option>
</select>
<img id="avatar" src="nie_wybrano.gif" />
[HTML] pobierz, plaintext 

W tym momencie wyświetla mi się nie do końca po mojej myśli, jednak już coś jest.
Tylko niestety jako, że to jest część formularza... tu zaczyna się problem. Kod wykonuje dużo porównań z tym select'em. Problemu nawet nie byłoby, gdyby nie to, że planuję dać jeden obrazek do 3 tych samych opcji, a ten select z użyciem "value" wysyła ścieżkę do obrazka, która będzie taka sama i wszystkie późniejsze porównania z wartością tego selectu będą krótko mówiąc bez sensu.

Da się to jakoś przerobić, żeby wartość wysyłana była wartością niezależną do wyświetlanego obrazka obok?

[trueblue]

Pokaż jak to robisz pierwszym sposobem.

Co do drugiego. Zamiast w atrybucie value, przechowuje w atrybucie np. data-src, czyli <option value="1" data-src="obrazek.gif">aaaa</option>
Musisz poprawić funkcję dla zdarzenia onChange.

[kamilos809]

heh... nic nie dało...

zamieniam <option value="obrazek.jpg">Tekst</option>
na <option data-src="obrazek.jpg">Tekst</option>

nic się nie zdarzyło.

Zacząłem kombinować z
<select name="test" onchange="document.getElementById('avatar').src=value">
zamieniałem na:
<select name="test" onchange="document.getElementById('avatar').src=data-src">
oraz
<select name="test" onchange="document.getElementById('avatar').data-src=value">

to również nie przynosi efektów.

co do poprzedniego sposobu, wyczaiłem kod ze strony: http://designwithpc.com/Plugins/ddSlick
zaimportowałem plugin .js wg zasad importowania, tzn sekcja head i takie tam.
Nieważne jakbym nie próbował tego użyć, za każdym razem nic.

[trueblue]

Heh.
Pewnie, że nic nie dało, bo niepoprawnie pobierasz atrybut data-src i wstawiasz, wcześniej miałeś bardzo źle, teraz masz źle.
http://www.w3schools.com/jsref/met_element_getattribute.asp
Powinieneś pobrać atrybut data-src i wstawić go jako atrybut src do obrazka.
Kombinowanie tu nic nie da, pomyśl co, gdzie, i kiedy chcesz zmienić.

[kamilos809]

poddaje się. Nie wiem jak ten kod zrobić, żeby uzyskać pożądany efekt.
Mógłby ktoś podać przykład "na chłopski rozum" brany? bo chciałbym to zrozumieć, a jak na razie błądzę w kółko i efektu brak

[tomi1985]

http://designwithpc.com/Plugins/ddSlick#demo

tu masz wszystko to czego Ci trzeba (IMG:style_emoticons/default/wink.gif)

[kamilos809]

taa...
Jakbym jeszcze miał pojęcie jak to uruchomić...
Już kiedyś próbowałem bawić sie jQuery i efekt był ten sam, czyli po prostu brak efektu.

[tomi1985]

kolego ale przecież tam masz instrukcje co i jak po kolei zrobić...