Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Select ma pokazywać różne obrazki
Forum PHP.pl > Forum > PHP
emas1
Mam do zrobienia formularz - a właściwie do dokończenia - w którym klient będzie sobie wybierał np wzór czegoś z selecta a po prawej stronie będzie się pokazywał obrazek pokazujący ten wzór. Problem jest jednak tego typu, że jak wybieram wzór to jest ok, ale pod spodem mam drugiego selecta i jak tam wybiorę sposób zapłaty to obrazek znika (bo nie ma żadnego rel które obsługuje napisana funkcja.

Jak zrobić, żeby funkcja odkrywająca obrazki z prawego diva działała tylko dla selecta o name="wzor" ?

  1. <div style="display:inline-block;">
  2. <form action="wyslij.php" method="POST" onsubmit="return validateForm(this);" style="margin-left: 5%">
  3.  
  4. <table style="background-color:#EEEEEE">
  5. <tr><td width=150px>Imię*</td><td><input type="text" style="width: 150px" name="imie"/></td></tr>
  6. <tr><td>Nazwisko*</td><td><input type="text" style="width: 150px" name="nazwisko"/></td></tr>
  7. <tr><td>Adres*</td><td><input type="text" style="width: 150px" name="adres1"/></td></tr>
  8. <tr><td>Adres</td><td><input type="text" style="width: 150px"name="adres2"/></td></tr>
  9. <tr><td>e-mail*</td><td><input type="text" style="width: 150px" name="email"/></td></tr>
  10. <tr><td>Telefon*</td><td><input type="text" style="width: 150px" name="tel"/></td></tr></table>
  11. <tr><td>Wzór*</td><td>
  12. <select name="wzor">
  13. <option rel="id1">Wzór 1</option>
  14. <option rel="id2">Wzór 2</option>
  15. <option rel="id3">Wzór 3</option>
  16. <option rel="id1">Wzór 4</option>
  17. <option rel="id1">Wzór 5</option>
  18. <option rel="id1">Wzór 6</option>
  19. <option rel="id1">Wzór 7</option>
  20. <option rel="id1">Wzór 8</option>
  21. <option rel="id1">Wzór 9</option>
  22. </select></td></tr>
  23. <tr><td>Sposób zapłaty*</td><td><select name="zaplata">
  24. <option>Przedpłata (przelew)</option>
  25. <option>Przy odbiorze (pobranie)</option>
  26. <option>Odbiór osobisty</option></select>
  27. <tr><td>Inne</td><td><textarea style="width: 250px; height:50px" name="inne"/></textarea></td></tr>
  28. <br><br>
  29.  
  30. <tr><td style="padding-top: 20px"><input type="submit" name="B1" value=" WYŚLIJ " style="font-size: 14px; padding:3px; padding-left: 10px; padding-right: 10px"></td></tr>
  31. </table><br>
  32. <p style="font-size: 12px">* - pola wymagane</p>
  33. </form>
  34. </div>
  35.  
  36. <div id="prawy" style="display:inline-block; width:30%; height:50%;">
  37. <div style="display: none" id="id1"><img src=http://www.tapetus.pl/obrazki/n/112480_kolorowe-serduszka-tekstura.jpg ></div>
  38. <div style="display: none" id="id2"><img src=http://www.tapetus.pl/obrazki/n/84179_roze-tekstura.jpg></div>
  39. <div style="display: none" id="id3"><img src=http://www.tapeciarnia.pl/tapety/srednie/166394_kolorowa_jodelka_tekstura.jpg></div>
  40.  
  41. </div>
  42.  
  43. </div>


  1. $(function() {
  2. $('select').on('change', function() {
  3. var id = $(this).find(':selected').attr('rel');
  4.  
  5. $("#prawy div").hide();
  6. $("#prawy").find('#'+id).show();
  7. });
  8. });
Greg0
podstawy podstaw selektorów:
Kod
select[name=wzor]
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.