Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Ukrywanie i pokazywanie części kodu za pomocą select
Forum PHP.pl > Forum > Przedszkole
mich123
23.01.2012, 21:30:23
Na wstepie zaznaczę, że nie znam się ani na php ani java script, większość tego co udało mi się już zrealizować znalazłem w sieci i poprzerabiałem do swoich potrzeb, jednakże jest problem z którym nie mogę sobie poradzić.
Otóż, mam listę wyboru:

[HTML] pobierz, plaintext 
  1. <select name="ILE">
  2. <option>NIC</option>
  3. <option>Blok pierwszy i drugi</option>
  4. <option>Blok pierwszy, drugi i trzeci</option>
  5. <option>Blok pierwszy, drugi, trzeci i czwarty</option>
[HTML] pobierz, plaintext


Być może takich bloków musiałbym zbudować kilka. Po wybraniu odpowiedniej opcji pokazują się wskazane bloki.

Bloki mogą być zawarte w DIV, np:
[HTML] pobierz, plaintext 
  1. <div id="blok1" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
  2. <div id="blok2" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
  3. <div id="blok3" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
  4. <div id="blok4" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
[HTML] pobierz, plaintext


Wszystko to jest częścią większego formularza, i w tych blokach również będą nasęepne rozbudowane części, z którymi już sobie poradziłem.

Proszę o pomoc w tej sprawie.



EDIT:

Podobny problem miałem z przyciskami radio i pokazywaniem/ukrywaniem wybranego fragmentu kodu i robiłem to tak:

[HTML] pobierz, plaintext 
  1. <INPUT TYPE="radio" NAME="pyt" VALUE="tak" onClick="document.getElementById('ukryty1').style.display='block';" />tak
  2. <INPUT TYPE="radio" NAME="pyt" VALUE="nie" onClick="document.getElementById('ukryty1').style.display='none';" />nie
  3.  
  4. <div id="ukryty1" style="DISPLAY: none">
  5. jakiskod
  6. </div>
[HTML] pobierz, plaintext


Chciałem to zrobic podobnie, jednakże nie wiem jak smile.gif


EDIT 2
<hr>
Gdybym chciał to zrobic za pomoca przycisków radio wyglądało by to tak:

[HTML] pobierz, plaintext 
  1. ILE?
  2. <INPUT TYPE="radio" NAME="czy" VALUE="nic" onClick="document.getElementById('blok1').style.display='none', 
  4. document.getElementById('blok2').style.display='none', document.getElementById('blok3').style.display='none', 
  6. document.getElementById('blok4').style.display='none';" />NIC
  7.  
  8.  
  9. <INPUT TYPE="radio" NAME="czy" VALUE="12"  onClick="document.getElementById('blok1').style.display='block', 
  11. document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='none', 
  13. document.getElementById('blok4').style.display='none';" />Blok pierwszy i drugi
  14.  
  15.  
  16. <INPUT TYPE="radio" NAME="czy" VALUE="123"  onClick="document.getElementById('blok1').style.display='block', 
  18. document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='block', 
  20. document.getElementById('blok4').style.display='none';" />Blok pierwszy, drugi i trzeci
  21.  
  22. <INPUT TYPE="radio" NAME="czy" VALUE="123"  onClick="document.getElementById('blok1').style.display='block', 
  24. document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='block', 
  26. document.getElementById('blok4').style.display='block';" />Blok pierwszy, drugi, trzeci i czwarty
  27.  
  28.  
  29.     <div id="blok1" style="DISPLAY: none">1.....jakiś kod, tabele itp</div>
  30.     <div id="blok2" style="DISPLAY: none">2.....jakiś kod, tabele itp</div>
  31.     <div id="blok3" style="DISPLAY: none">3.....jakiś kod, tabele itp</div>
  32.     <div id="blok4" style="DISPLAY: none">4.....jakiś kod, tabele itp</div>
[HTML] pobierz, plaintext


ktoś wie? nie moge ruszyć dalej bez rozwiązania tego problemu
bzeebzee
23.01.2012, 21:52:43 
[HTML] pobierz, plaintext 
  1. <select id="select_div">
  2.     <option value="1">Div 1</option>
  3.     <option value="2">Div 2</option>
  4.     <option value="3">Div 3</option>
  5. </div>
  6.  
  7. <div id="1">Treść</div>
  8. <div id="2">Treść</div>
  9. <div id="3">Treść</div>
[HTML] pobierz, plaintext


Tak się to prezentuje z poziomu html. Teraz wystarczy dodać bibliotekę jQuery oraz napisać kilka linijek kodu.

[HTML] pobierz, plaintext 
  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2. $(document).ready(function() {
  3.     var aDiv = 1;
  4.     $('#select_div').change(function() {
  5.         $('div#'+aDiv).css('display', 'none');
  6.         aDiv = $(this + ' option:selected').attr('value');
  7.         $('div#'+aDiv).css('display', 'block');
  8.     });
  9. });
[HTML] pobierz, plaintext


Musisz to przetestować, bo pisałem z palucha. Ogólnie uważam, że jQuery jest wygodniejsze niż czyste JS smile.gif. Powodzenia
mich123
24.01.2012, 23:33:07
nie działa. po odpaleniu pliku pojawia się treść z 3 divów, po wybraniu ktoregokolwiek selecta znika 3 div.

pokombinowałem i oto rezultaty:

1. gdybym cgciał wyświetlic wybranego diva wyglądało by to tak:

[HTML] pobierz, plaintext 
  1. <html>
  2. <hea
  3. </head>
  4.  
  5.  
  6. <body>
  7.  
  8.  
  9. <select name="lista" onchange="if (this.selectedIndex == 1) {document.getElementById('element1').style.display='block', document.getElementById('element2').style.display='none', document.getElementById('element3').style.display='none';} else {if (this.selectedIndex == 2) {document.getElementById('element1').style.display='none', document.getElementById('element3').style.display='none', document.getElementById('element2').style.display='block';} else {if (this.selectedIndex == 3) {document.getElementById('element3').style.display='block', document.getElementById('element2').style.display='none', document.getElementById('element1').style.display='none';} else {document.getElementById('element3').style.display='none';};};}">
  10. <option value="">Wybierz...</option>
  11. <option value="1">Pokaż element 1</option>
  12. <option value="2">Pokaż element 2</option>
  13. <option value="3">Pokaż element 3</option>
  14. </select>
  15.  
  16. <div id="element1" style="display: none;">
  17. Element1
  18. </div>
  19. <div id="element2" style="display: none;">
  20. Element2
  21. </div>
  22. <div id="element3" style="display: none;">
  23. Element3
  24. </div> 
  25.  
  26.  
  27. </body
  28. </html>
[HTML] pobierz, plaintext


W przypadku mojego zapotrzebowania, gdzi musze wyświetlać na przemian 1 lub 1 i 2 lub 1, 2 i 3 wygląda to tak:

[HTML] pobierz, plaintext 
  1. <html>
  2. <hea
  3. </head>
  4.  
  5.  
  6. <body>
  7.  
  8.  
  9. <select name="lista" onchange="if (this.selectedIndex == 1) {document.getElementById('element1').style.display='block', 
  11. document.getElementById('element2').style.display='none', document.getElementById('element3').style.display='none';} else {if (this.selectedIndex == 
  13. 2) {document.getElementById('element1').style.display='block', document.getElementById('element3').style.display='none', 
  15. document.getElementById('element2').style.display='block';} else {if (this.selectedIndex == 3) 
  17. {document.getElementById('element3').style.display='block', document.getElementById('element2').style.display='block', 
  19. document.getElementById('element1').style.display='block';} else {document.getElementById('element3').style.display='none';};};}">
  20. <option value="4">Wybierz...</option>
  21. <option value="1">Pokaż element 1</option>
  22. <option value="2">Pokaż element 1 i 2</option>
  23. <option value="3">Pokaż element 1,2,3</option>
  24. </select>
  25.  
  26. <div id="element1" style="display: none;">
  27. Element1
  28. </div>
  29. <div id="element2" style="display: none;">
  30. Element2
  31. </div>
  32. <div id="element3" style="display: none;">
  33. Element3
  34. </div> 
  35.  
  36.  
  37. </body
  38. </html>
[HTML] pobierz, plaintext



Jednak zostaja mi 2 problemy:
1. co zrobić żeby po wybraniu 1 opcji wszystkie divy z powrotem znikały
2. jak to wszystko uprościć, zeby wyglądało bardziej elegancko
lub
3. jak to zrobic żeby funckaja była zamknięta w <script type='text/javascript'></script> i jak ją potem wywołać

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4.  
  5.  
  6. <body>
  7.  
  8.  
  9. <select name="lista" onchange="if (this.selectedIndex == 1) {document.getElementById('element1').style.display='block', document.getElementById('element2').style.display='none', document.getElementById('element3').style.display='none';} else {if (this.selectedIndex == 2) {document.getElementById('element1').style.display='block', document.getElementById('element3').style.display='none', document.getElementById('element2').style.display='block';} else {if (this.selectedIndex == 3) {for(i=1;i<=3;i++) document.getElementById('element'+i).style.display='block';} else {if (this.selectedIndex == 5) {document.getElementById('element3').style.display='none', document.getElementById('element1').style.display='none', document.getElementById('element2').style.display='none';} else {document.getElementById('element3').style.display='none', document.getElementById('element1').style.display='none', document.getElementById('element2').style.display='none';};};};}">
  10. <option value="4">NIE</option>
  11. <option value="1">Pokaż element 1</option>
  12. <option value="2">Pokaż element 1 i 2</option>
  13. <option value="3">Pokaż element 1,2,3</option>
  14. <option value="5">Tak, więcej</option>
  15. </select>
  16.  
  17. <div id="element1" style="display: none;">
  18. Element1
  19. </div>
  20. <div id="element2" style="display: none;">
  21. Element2
  22. </div>
  23. <div id="element3" style="display: none;">
  24. Element3
  25. </div> 
  26.  
  27. <div id="element4" style="display: none;">
  28. Element4
  29. </div> 
  30.  
  31. <div id="element5" style="display: none;">
  32. Element5
  33. </div> 
  34.  
  35.  
  36. </body
  37. </html>
[HTML] pobierz, plaintext


W tym momencie działa jak chciałem, ale > zapewne da się to zwinąć w <script type='text/javascript'></script>
i napisac jakoś w bardziej przejrzysty sposób.

trochę uprosciłem, ale pojawił się nowy problem smile.gif

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. </head>
  4.  
  5.  
  6. <body>
  7.  
  8. <table height="0" cellpadding="0" cellspacing="0" border="0">
  9. <tr> 
  10. <td class="lewa">Czy?
  11. </td>
  12. <td class="prawa">
  13. <select name="lista" onchange="if (this.selectedIndex == 1) {document.getElementById('element1').style.display='block', 
  15. document.getElementById('element2').style.display='none', document.getElementById('element3').style.display='none';} else {if (this.selectedIndex == 
  17. 2) {document.getElementById('element1').style.display='block', document.getElementById('element3').style.display='none', 
  19. document.getElementById('element2').style.display='block';} else {if (this.selectedIndex == 3) {for(i=1;i<=3;i++) 
  21. document.getElementById('element'+i).style.display='block';} else {document.getElementById('element3').style.display='none', 
  23. document.getElementById('element1').style.display='none', document.getElementById('element2').style.display='none';};};}">
  24. <option value="NIE">NIE</option>
  25. <option value="1">Tak, jednego</option>
  26. <option value="2">Tak, dwóch</option>
  27. <option value="3">Tak, trzech</option>
  28. <option value="5">Tak, więcej</option>
  29. </select>
  30. </td></tr>
  31.  
  32.  
  33. </table>
  34.  
  35.  
  36. <div id="element1" style="display: none;">
  37. <table height="0" cellpadding="0" cellspacing="0" border="0">
  38. <tr> 
  39. <td class="lewa">Czy?</td>
  40. <td class="prawa">
  41. <INPUT TYPE="radio" NAME="czy_wl_pos_pr_ja" VALUE="tak" onClick="document.getElementById('ukrytyw1').style.display='block';" 
  42.  
  43. />tak <INPUT TYPE="radio" NAME="czy_ws1_ma" VALUE="nie" onClick="document.getElementById('ukrytyw1').style.display='none';" />nie
  44. </td></tr>
  45.  
  46.  
  47. </table>
  48.  
  49. <div id="ukrytyw1" style="DISPLAY: none">
  50. <table height="0" cellpadding="0" cellspacing="0" border="0">
  51.  <tr>
  52.   <td class="lewa">Data</td>
  53.   <td class="prawa"><input type="text" id="datepicker4" name="dataprwsp1"></td>
  54.  </tr>
  55.  </table>
  56. </div>
  57.  
  58.  
  59. </div>
  60.  
  61.  
  62. <div id="element2" style="display: none;">
  63. Element2
  64. </div>
  65. <div id="element3" style="display: none;">
  66. Element3
  67. </div> 
  68.  
  69.  
  70.  
  71. </body
  72. </html>
[HTML] pobierz, plaintext


Wybieram selectem opcję >tak, jednego
pojawiają się 2 przyciski Radio
Wszystko działa, ale zaznaczenie z przycisków radio nie znika.
Coś się gryzie, i nie wiem co

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.