Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP/HTML/JS] Pole select + show img
Forum PHP.pl > Forum > Przedszkole
fredzio90
otóż mam takie pytanie.. czy moglibyście mi podać jakiś przykłąd albo stornke ( nie google ;D ) gdzie mógłbym otryzmać kod który stworzy ttakie coś..:

mam pole select w ktorym są nazwy krajów.. pod value="" każdej z opcji jest nazwa pliku.... i chciałbym aby jak wybiore jakąś opcje po prawej stornie pola selct pokazała się ta flaga danego kraju...
devnul
  1. <select onchange="f(this)">
  2. <option value="a.gif">a</option>
  3. <option value="b.gif">b</option>
  4. <img id="obraz" src="blang.gif" alt="" />
  5. <script type="text/javascript">
  6. function f(obj){
  7. document.getElementById('obraz').src=obj.options[this.selectedIndex].value;
  8. }
fredzio90
ostanie prośba.. po małej modyfikacji mam taką opcje:

  1. <?php
  2. <option value="afghanistan">Afganistan</option>
  3. ?>


i plik nazywa się flag_afghanistan.png i jest on w katalogu images/flags....

mógłbyś mi napisać na tym pryzkłądzie jktory podałeś jak to bedzie wyglądać?
devnul
bez kitu - troche inwencji
  1. <select onchange="f(this)">
  2. <option value="polska">polska</option>
  3. <option value="armenia">armenia</option>
  4. <img id="obraz" src="blank.gif" alt="" />
  5. <script type="text/javascript">
  6. function f(obj){
  7. document.getElementById('obraz').src='images/flags/flag_'+obj.options[this.selectedIndex].value+'.png';
  8. }
fredzio90
niestey nie działa... wybieram Kraj i niestety nie pokazuje danej flagi ( pliki są na serwerze )

do pliku odpowiedzialnego za pokazywanie skryptów JS dodaje takie coś:

  1. <?php
  2. <script>
  3. function f(obj){
  4. document.getElementById('obraz').src='images/flags/flag_'+obj.options[this.selectedIndex].value+'.png';
  5. }
  6. </script>
  7. ?>


i u mnie wygląda to tak:

  1. <tr>
  2. <td align="right" class="uni_01">Kraj Gospodarzy:</td>
  3. <td align="left" class="uni_01">
  4. <select name="flaga_gosp" onchange="f(this)">
  5. <option value="-" selected>Wybierz Kraj</option>
  6. <option value="afghanistan">Afganistan</option>
  7.  
  8. [...]
  9.  
  10. <option value="italy">Włochy</option>
  11. </select><img id="obraz" src="blank.gif" alt="" />
  12. </td>
  13. </tr>


i LYPA..
devnul
spróbuj dodać / pzed images/flags/
fredzio90
to samo
Kicok
Nie:
Kod
obj.options[this.selectedIndex].value


Tylko:
Kod
obj.options[obj.selectedIndex].value



W FireFoxie jest bardzo fajne rzecz: Narzędzia -> Konsola Błędów. Usuwasz z niej stare wpisy, wchodzisz na swoją stronkę i sprawdzasz, jakie błędy wyrzuciło.
devnul
zgadza sie - moje niedopatrzenie - pisane z kija więc... winksmiley.jpg

a co do FF to są lepsze narzędzia niż konsola błędów winksmiley.jpg
fredzio90
działa dziękuje wam thumbsupsmileyanim.gif

ostatnie pytanie.. jak WYRÓWNAĆ obrazek z listą.... mój kodzik:


  1. <tr>
  2. <td align="right" class="uni_01">Kraj Gospodarzy:</td>
  3. <td align="left" class="uni_01">
  4. <select name="flaga_gosp" onchange="f(this)">
  5. <option value="-" selected>Wybierz Kraj</option>
  6. <option value="afghanistan">Afganistan</option>
  7.  
  8. [...]
  9.  
  10. <option value="italy">Włochy</option>
  11. </select><img id="obraz" src="blank.gif" height="20" width="20" alt="" />
  12. </td>
  13. </tr>


a efekt jest następujący



pomoze ktos?

iu mam jescze jeden problem.. ma 2 pola SELCT na jendej stronie i jak zaznacze w pierszym jakis kraj to w drugim jak wybiore nie pokazuje się obok ikonka....
devnul
i nic dziwnego

  1. <img align="right" [ciach] />
to jedno a drugie
  1. <select onchange="f(this,'obraz')">
  2. <option value="polska">polska</option>
  3. <option value="armenia">armenia</option>
  4. <img id="obraz" src="blank.gif" alt="" />
  5. <select onchange="f(this,'obraz2')">
  6. <option value="polska">polska</option>
  7. <option value="armenia">armenia</option>
  8. <img id="obraz2" src="blank.gif" alt="" />
  9. <script type="text/javascript">
  10. function f(obj,im){
  11. document.getElementById(im).src='images/flags/flag_'+obj.options[obj.selectedIndex].value+'.png';
  12. }
fredzio90
dałem tak :

align="top"

i działa ;D

ale to drugie woogule sie nie zmienia...
devnul
najwyrazniej cos zle robisz - bo powino dzialac
fredzio90
Prosże dam wszytsko tutaj...:

Pierwszy SELECT

  1. <tr>
  2. <td align="right" class="uni_01">Kraj Gospodarzy:</td>
  3. <td align="left" class="uni_01">
  4. <select name="flaga_gosp" onchange="f(this, 'obraz')">
  5. <option value="-" selected>Wybierz Kraj</option>
  6. <option value="afghanistan">Afganistan</option>
  7. [...]
  8. <option value="italy">Włochy</option>
  9. </select> <img id="obraz" align="top" src="blank.gif" height="20" width="20" alt="" />
  10. </td>
  11. </tr>



Drugi SELECT

  1. <tr>
  2. <td align="right" class="uni_01">Kraj Gości:</td>
  3. <td align="left" class="uni_01">
  4. <select name="flaga_gosc" onchange="f(this, 'obraz2')">
  5. <option value="-" selected>Wybierz Kraj</option>
  6. <option value="afghanistan">Afganistan</option>
  7. [...]
  8. <option value="italy">Włochy</option>
  9. </select> <img id="obraz2" align="top" src="blank.gif" height="20" width="20" alt="" />
  10. </td>
  11. </tr>



i dodanie do pliku odpowiedzialnego za pokazanie strony:


  1. <script language="JavaScript">
  2. function f(obj,im){
  3. document.getElementById(im).src='images/flags/flag_'+obj.options[obj.selectedIndex].value+'.png';
  4. }
  5.  




i error:

  1. <?php
  2. Parse error: syntax error, unexpected T_STRING, expecting ',' or ';'
  3. ?>


w linijce:

  1. <select name="flaga_gosp" onchange="f(this, 'obraz')">


HELP
devnul
Błąd po Twojej stronie - nie po mojej. Sory Winetou - ale ktoś tu nie potrafi poradzic sobie z najprostszymi problemami. Najwyraźniej drukujesz to w php przez echo 'kod html ' a jakbyś nie zauważył to w tm kodzie który znajduje sie w podanej przez Ciebie linijce jest ' użyj \ przed ' i będzie ok.

Na przyszłość: troche inwencji własnej - błąd wywalony przez php nie może mieć nic wspólnego z JS/html (bezpośrednio)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.