Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Lista rozwijana wayswietlanie obrazka
Forum PHP.pl > Forum > Przedszkole
coins4psc
3.02.2015, 22:50:26
Witam wszystkich serdecznie wink.gif Do tej pory udało mi się zrobić takie 2 listwy rozwijane i gdy wybierze się jakieś 2 opcje pojawia się cena. Teraz chciałbym jeszcze zrobić aby po wybraniu np. z listy rozwijanej opcji "A" pojawiło się jakieś zdjęcie np. obok ceny. Kod wygląda tak :

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. jQuery(function ($) {
  3.     $("#pierwszy, #drugi").change(function () {
  4.         var val1 = $("#pierwszy").val();
  5.         var val2 = $("#drugi").val();
  6.  
  7.         var text = "";
  8.  
  9.         switch (val1) {
  10.             case "Unranked":
  11.                 switch (val2) {
  12.                     case "5":
  13.                         text = "28€";
  14.                         break;
  15.                     case "6":
  16.                         text = "33€";
  17.                         break;
  18.                     case "7":
  19.                         text = "39€";
  20.                         break;
  21.                     case "8":
  22.                         text = "44€";
  23.                         break;
  24.                     case "9":
  25.                         text = "50€";
  26.                         break;
  27.                     case "10":
  28.                         text = "55€";
  29.                         break;
  30.                 }
  31.                 break;
  32.             case "Bronze":
  33.                 switch (val2) {
  34.                     case "5":
  35.                         text = "23€";
  36.                         break;
  37.                     case "6":
  38.                         text = "27€";
  39.                         break;
  40.                     case "7":
  41.                         text = "32€";
  42.                         break;
  43.                     case "8":
  44.                         text = "36€";
  45.                         break;
  46.                     case "9":
  47.                         text = "41€";
  48.                         break;
  49.                     case "10":
  50.                         text = "45€";
  51.                         break;
  52.                 }
  53.                 break;
  54.             case "Silver":
  55.                 switch (val2) {
  56.                     case "5":
  57.                         text = "25€";
  58.                         break;
  59.                     case "6":
  60.                         text = "30€";
  61.                         break;
  62.                     case "7":
  63.                         text = "35€";
  64.                         break;
  65.                     case "8":
  66.                         text = "40€";
  67.                         break;
  68.                     case "9":
  69.                         text = "45€";
  70.                         break;
  71.                     case "10":
  72.                         text = "50€";
  73.                         break;
  74.                 }
  75.                 break;
  76.             case "Gold":
  77.                 switch (val2) {
  78.                     case "5":
  79.                         text = "28€";
  80.                         break;
  81.                     case "6":
  82.                         text = "33€";
  83.                         break;
  84.                     case "7":
  85.                         text = "39€";
  86.                         break;
  87.                     case "8":
  88.                         text = "44€";
  89.                         break;
  90.                     case "9":
  91.                         text = "50€";
  92.                         break;
  93.                     case "10":
  94.                         text = "55€";
  95.                         break;
  96.                 }
  97.                 break;
  98.             case "Platinum":
  99.                 switch (val2) {
  100.                     case "5":
  101.                         text = "30€";
  102.                         break;
  103.                     case "6":
  104.                         text = "36€";
  105.                         break;
  106.                     case "7":
  107.                         text = "42€";
  108.                         break;
  109.                     case "8":
  110.                         text = "48€";
  111.                         break;
  112.                     case "9":
  113.                         text = "54€";
  114.                         break;
  115.                     case "10":
  116.                         text = "60€";
  117.                         break;
  118.                 }
  119.                 break;
  120.             case "Diamond":
  121.                 switch (val2) {
  122.                     case "5":
  123.                         text = "34€";
  124.                         break;
  125.                     case "6":
  126.                         text = "41€";
  127.                         break;
  128.                     case "7":
  129.                         text = "47€";
  130.                         break;
  131.                     case "8":
  132.                         text = "54€";
  133.                         break;
  134.                     case "9":
  135.                         text = "61€";
  136.                         break;
  137.                     case "10":
  138.                         text = "67€";
  139.                         break;
  140.                 }
  141.                 break;
  142.  
  143.         }
  144.  
  145.         $("#tekst").text(text);
  146.     }).eq(0).change();
  147. });
  148.  
  149.  
  150. </script>
[PHP] pobierz, plaintext


Co bym musiał zrobić aby obok ceny pojawiało się jeszcze zdjęcie ? Wygląda to mniej więcej tak : http://boosting123.wc.lt/bpw.php

Pozdro
rad11
4.02.2015, 10:13:46 
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. jQuery(function ($) {
  3.     $("#pierwszy, #drugi").change(function () {
  4.         var val1 = $("#pierwszy").val();
  5.         var val2 = $("#drugi").val();
  6.         var img = '';
  7.         var text = "";
  8.  
  9.         switch (val1) {
  10.             case "Unranked":
  11.                 switch (val2) {
  12.                     case "5":
  13.                         text = "28€";
  14.                         img  = "<img src="" />";
  15.                         break;
  16.                     case "6":
  17.                         text = "33€";
  18.                         break;
  19.                     case "7":
  20.                         text = "39€";
  21.                         break;
  22.                     case "8":
  23.                         text = "44€";
  24.                         break;
  25.                     case "9":
  26.                         text = "50€";
  27.                         break;
  28.                     case "10":
  29.                         text = "55€";
  30.                         break;
  31.                 }
  32.                 break;
  33.             case "Bronze":
  34.                 switch (val2) {
  35.                     case "5":
  36.                         text = "23€";
  37.                         break;
  38.                     case "6":
  39.                         text = "27€";
  40.                         break;
  41.                     case "7":
  42.                         text = "32€";
  43.                         break;
  44.                     case "8":
  45.                         text = "36€";
  46.                         break;
  47.                     case "9":
  48.                         text = "41€";
  49.                         break;
  50.                     case "10":
  51.                         text = "45€";
  52.                         break;
  53.                 }
  54.                 break;
  55.             case "Silver":
  56.                 switch (val2) {
  57.                     case "5":
  58.                         text = "25€";
  59.                         break;
  60.                     case "6":
  61.                         text = "30€";
  62.                         break;
  63.                     case "7":
  64.                         text = "35€";
  65.                         break;
  66.                     case "8":
  67.                         text = "40€";
  68.                         break;
  69.                     case "9":
  70.                         text = "45€";
  71.                         break;
  72.                     case "10":
  73.                         text = "50€";
  74.                         break;
  75.                 }
  76.                 break;
  77.             case "Gold":
  78.                 switch (val2) {
  79.                     case "5":
  80.                         text = "28€";
  81.                         break;
  82.                     case "6":
  83.                         text = "33€";
  84.                         break;
  85.                     case "7":
  86.                         text = "39€";
  87.                         break;
  88.                     case "8":
  89.                         text = "44€";
  90.                         break;
  91.                     case "9":
  92.                         text = "50€";
  93.                         break;
  94.                     case "10":
  95.                         text = "55€";
  96.                         break;
  97.                 }
  98.                 break;
  99.             case "Platinum":
  100.                 switch (val2) {
  101.                     case "5":
  102.                         text = "30€";
  103.                         break;
  104.                     case "6":
  105.                         text = "36€";
  106.                         break;
  107.                     case "7":
  108.                         text = "42€";
  109.                         break;
  110.                     case "8":
  111.                         text = "48€";
  112.                         break;
  113.                     case "9":
  114.                         text = "54€";
  115.                         break;
  116.                     case "10":
  117.                         text = "60€";
  118.                         break;
  119.                 }
  120.                 break;
  121.             case "Diamond":
  122.                 switch (val2) {
  123.                     case "5":
  124.                         text = "34€";
  125.                         break;
  126.                     case "6":
  127.                         text = "41€";
  128.                         break;
  129.                     case "7":
  130.                         text = "47€";
  131.                         break;
  132.                     case "8":
  133.                         text = "54€";
  134.                         break;
  135.                     case "9":
  136.                         text = "61€";
  137.                         break;
  138.                     case "10":
  139.                         text = "67€";
  140.                         break;
  141.                 }
  142.                 break;
  143.  
  144.         }
  145.  
  146.         $("#tekst").text(text);
  147.         $("#twoj_kontener").html(img);
  148.     }).eq(0).change();
  149. });
  150.  
  151.  
  152. </script>
[PHP] pobierz, plaintext
coins4psc
4.02.2015, 11:06:59
Mój kod teraz wygląda następująco i nie wyświetla ani ceny ani obrazka co zrobiłem nie tak?
[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. jQuery(function ($) {
  3.     $("#pierwszy, #drugi").change(function () {
  4.         var val1 = $("#pierwszy").val();
  5.         var val2 = $("#drugi").val();
  6.         var img = '';
  7.         var text = "";
  8.  
  9.         switch (val1) {
  10.             case "Unranked":
  11.                 switch (val2) {
  12.                     case "5":
  13.                         text = "28€";
  14. 						img  = "<img src="silver_3.png" />";
  15.                         break;
  16.                     case "6":
  17.                         text = "33€";
  18.                         break;
  19.                     case "7":
  20.                         text = "39€";
  21.                         break;
  22.                     case "8":
  23.                         text = "44€";
  24.                         break;
  25.                     case "9":
  26.                         text = "50€";
  27.                         break;
  28.                     case "10":
  29.                         text = "55€";
  30.                         break;
  31.                 }
  32.                 break;
  33.             case "Bronze":
  34.                 switch (val2) {
  35.                     case "5":
  36.                         text = "23€";
  37.                         break;
  38.                     case "6":
  39.                         text = "27€";
  40.                         break;
  41.                     case "7":
  42.                         text = "32€";
  43.                         break;
  44.                     case "8":
  45.                         text = "36€";
  46.                         break;
  47.                     case "9":
  48.                         text = "41€";
  49.                         break;
  50.                     case "10":
  51.                         text = "45€";
  52.                         break;
  53.                 }
  54.                 break;
  55.             case "Silver":
  56.                 switch (val2) {
  57.                     case "5":
  58.                         text = "25€";
  59.                         break;
  60.                     case "6":
  61.                         text = "30€";
  62.                         break;
  63.                     case "7":
  64.                         text = "35€";
  65.                         break;
  66.                     case "8":
  67.                         text = "40€";
  68.                         break;
  69.                     case "9":
  70.                         text = "45€";
  71.                         break;
  72.                     case "10":
  73.                         text = "50€";
  74.                         break;
  75.                 }
  76.                 break;
  77.             case "Gold":
  78.                 switch (val2) {
  79.                     case "5":
  80.                         text = "28€";
  81.                         break;
  82.                     case "6":
  83.                         text = "33€";
  84.                         break;
  85.                     case "7":
  86.                         text = "39€";
  87.                         break;
  88.                     case "8":
  89.                         text = "44€";
  90.                         break;
  91.                     case "9":
  92.                         text = "50€";
  93.                         break;
  94.                     case "10":
  95.                         text = "55€";
  96.                         break;
  97.                 }
  98.                 break;
  99.             case "Platinum":
  100.                 switch (val2) {
  101.                     case "5":
  102.                         text = "30€";
  103.                         break;
  104.                     case "6":
  105.                         text = "36€";
  106.                         break;
  107.                     case "7":
  108.                         text = "42€";
  109.                         break;
  110.                     case "8":
  111.                         text = "48€";
  112.                         break;
  113.                     case "9":
  114.                         text = "54€";
  115.                         break;
  116.                     case "10":
  117.                         text = "60€";
  118.                         break;
  119.                 }
  120.                 break;
  121.             case "Diamond":
  122.                 switch (val2) {
  123.                     case "5":
  124.                         text = "34€";
  125.                         break;
  126.                     case "6":
  127.                         text = "41€";
  128.                         break;
  129.                     case "7":
  130.                         text = "47€";
  131.                         break;
  132.                     case "8":
  133.                         text = "54€";
  134.                         break;
  135.                     case "9":
  136.                         text = "61€";
  137.                         break;
  138.                     case "10":
  139.                         text = "67€";
  140.                         break;
  141.                 }
  142.                 break;
  143.  
  144.         }
  145.  
  146.         $("#tekst").text(text);
  147. 		$("#zdjontko").html(img);
  148.     }).eq(0).change();
  149. });
  150.  
  151.  
  152. </script>
[PHP] pobierz, plaintext
Jarma
4.02.2015, 11:33:05
Zamień 

[HTML] pobierz, plaintext 
  1. img  = "<img src="silver_3.png" />";
[HTML] pobierz, plaintext


na

[HTML] pobierz, plaintext 
  1. img  = "<img src='silver_3.png' />";
[HTML] pobierz, plaintext
coins4psc
4.02.2015, 12:10:43
dziekuję bardzo smile.gif
Teraz jeszcze 1 pytanko. W jaki sposób mój kod mógłbym przerobić tak, że na przykład dodałbym więcej list rozwijanych ( np. 4 listy ) i gdy wybiorę z każdej po 1 opcji wyświetli się cena ew. obrazek. Działanie ma być takie same jak z tymi 2 listami co teraz posiadam tylko np. chciałbym dodać jeszcze 2. Tutaj są 2 listy,a chciałbym aby były np. 4. LINK.

Przepraszam za problemy ale na prawdę zależy mi na tym żeby to zrobić, pozdrawiam wink.gif
Jarma
4.02.2015, 12:25:27
Czyli chcesz mieć jeszcze dwie listy?

No to obsługa za pomocą kolejnych switch'y, albo lepiej przejść na tablicę wielowymiarową.
coins4psc
4.02.2015, 12:32:34
Ok, tylko nie wiem czy ja sam sobie nie utrudniam bo głównie chodzi mi o to aby uzyskać efekt podobny do tego co jest na Tej stronie i się zjedzie odrobinkę niżej. Widnieje tam 6 list rozwijanych. Czyli mam próbować tym kodem czy może da się zrobić to inaczej? Bo chciałbym uzyskać identyczny efekt albo chociaż podobny.
Jarma
4.02.2015, 12:47:51
No to tak jak pisałem, najlepiej to zrobić na tablicach wielowymiarowych.

Możesz też dodawać kolejne switch'e.
b4rt3kk
4.02.2015, 13:04:05
Masz taki plugin w jQuery, co się nazywa chained - proponuję go użyć, w połączeniu z php zaoszczędzi Ci to sporo pracy i czasu.
coins4psc
4.02.2015, 14:08:43
Wszystko działa jak nalezy tylko nie wyświetla mi obrazka hmmm??

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. jQuery(function ($) {
  3.     $("#pierwszy, #drugi, #trzeci").change(function () {
  4.         var val1 = $("#pierwszy").val();
  5.         var val2 = $("#drugi").val();
  6. 		var val3 = $("#trzeci").val();
  7.         var img = '';
  8.         var text = "";
  9.  
  10.         switch (val1) {
  11.             case "Unranked":
  12.                 switch (val2) { 
  13.                     case "Division 5":
  14. 						switch (val3) {
  15. 							case "5":
  16. 								text = "20";
  17. 								break;
  18.                     case "Division 4":
  19.                         text = "33€";
  20.                         break;
  21.                     case "Division 3":
  22.                         text = "39€";
  23.                         break;
  24.                     case "Division 2":
  25.                         text = "44€";
  26.                         break;
  27.                     case "Division 1":
  28.                         text = "50€";
  29.                         break;
  30.                 }}
  31.                 break;
  32.             case "Bronze":
  33.                 switch (val2) {
  34.                     case "Division 5":
  35. 						switch (val3) {
  36. 							case "5":
  37. 								text = "920€";
  38. 								img  = "<img src='b5.png' />"; 
  39. 								break;
  40.                     case "Division 4":
  41.                         text = "27€";
  42.                         break;
  43.                     case "Division 3":
  44.                         text = "32€";
  45.                         break;
  46.                     case "Division 2":
  47.                         text = "36€";
  48.                         break;
  49.                     case "Division 1":
  50.                         text = "41€";
  51.                         break;
  52.                 }}
  53.                 break;
  54.             case "Silver":
  55.                 switch (val2) {
  56.                     case "Division 5":
  57.                         text = "25€";
  58.                         break;
  59.                     case "Division 4":
  60.                         text = "30€";
  61.                         break;
  62.                     case "Division 3":
  63.                         text = "35€";
  64.                         break;
  65.                     case "Division 2":
  66.                         text = "40€";
  67.                         break;
  68.                     case "Division 1":
  69.                         text = "45€";
  70.                         break;
  71.                 }
  72.                 break;
  73.             case "Gold":
  74.                 switch (val2) {
  75.                     case "Division 5":
  76.                         text = "28€";
  77.                         break;
  78.                     case "Division 4":
  79.                         text = "33€";
  80.                         break;
  81.                     case "Division 3":
  82.                         text = "39€";
  83.                         break;
  84.                     case "Division 2":
  85.                         text = "44€";
  86.                         break;
  87.                     case "Division 1":
  88.                         text = "50€";
  89.                         break;
  90.                 }
  91.                 break;
  92.             case "Platinum":
  93.                 switch (val2) {
  94.                     case "Division 5":
  95.                         text = "30€";
  96.                         break;
  97.                     case "Division 4":
  98.                         text = "36€";
  99.                         break;
  100.                     case "Division 3":
  101.                         text = "42€";
  102.                         break;
  103.                     case "Division 2":
  104.                         text = "48€";
  105.                         break;
  106.                     case "Division 1":
  107.                         text = "54€";
  108.                         break;
  109.                 }
  110.                 break;
  111.             case "Diamond":
  112.                 switch (val2) {
  113.                     case "Division 5":
  114.                         text = "34€";
  115.                         break;
  116.                     case "Division 4":
  117.                         text = "41€";
  118.                         break;
  119.                     case "Division 3":
  120.                         text = "47€";
  121.                         break;
  122.                     case "Division 2":
  123.                         text = "54€";
  124.                         break;
  125.                     case "Division 1":
  126.                         text = "61€";
  127.                         break;
  128.                 }
  129.                 break;
  130.  
  131.         }
  132.  
  133.         $("#tekst").text(text);
  134.         $("#zdja").html(img);
  135.     }).eq(0).change();
  136. });
  137. </script>
[PHP] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div id="zdja"></div>
[HTML] pobierz, plaintext
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.