Forum PHP.pl

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 
<select name="ILE">
<option>NIC</option>
<option>Blok pierwszy i drugi</option>
<option>Blok pierwszy, drugi i trzeci</option>
<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 
<div id="blok1" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
<div id="blok2" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
<div id="blok3" style="DISPLAY: none">.....jakiś kod, tabele itp</div>
<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 
<INPUT TYPE="radio" NAME="pyt" VALUE="tak" onClick="document.getElementById('ukryty1').style.display='block';" />tak
<INPUT TYPE="radio" NAME="pyt" VALUE="nie" onClick="document.getElementById('ukryty1').style.display='none';" />nie
 
<div id="ukryty1" style="DISPLAY: none">
jakiskod
</div>
[HTML] pobierz, plaintext 

Chciałem to zrobic podobnie, jednakże nie wiem jak (IMG:style_emoticons/default/smile.gif)


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

[HTML] pobierz, plaintext 
ILE?
<INPUT TYPE="radio" NAME="czy" VALUE="nic" onClick="document.getElementById('blok1').style.display='none', 
document.getElementById('blok2').style.display='none', document.getElementById('blok3').style.display='none', 
document.getElementById('blok4').style.display='none';" />NIC
 
 
<INPUT TYPE="radio" NAME="czy" VALUE="12"  onClick="document.getElementById('blok1').style.display='block', 
document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='none', 
document.getElementById('blok4').style.display='none';" />Blok pierwszy i drugi
 
 
<INPUT TYPE="radio" NAME="czy" VALUE="123"  onClick="document.getElementById('blok1').style.display='block', 
document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='block', 
document.getElementById('blok4').style.display='none';" />Blok pierwszy, drugi i trzeci
 
<INPUT TYPE="radio" NAME="czy" VALUE="123"  onClick="document.getElementById('blok1').style.display='block', 
document.getElementById('blok2').style.display='block', document.getElementById('blok3').style.display='block', 
document.getElementById('blok4').style.display='block';" />Blok pierwszy, drugi, trzeci i czwarty
 
 
    <div id="blok1" style="DISPLAY: none">1.....jakiś kod, tabele itp</div>
    <div id="blok2" style="DISPLAY: none">2.....jakiś kod, tabele itp</div>
    <div id="blok3" style="DISPLAY: none">3.....jakiś kod, tabele itp</div>
    <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

Ten post edytował mich123 22.01.2012, 17:10:26

[HTML] pobierz, plaintext 
<select id="select_div">
    <option value="1">Div 1</option>
    <option value="2">Div 2</option>
    <option value="3">Div 3</option>
</div>
 
<div id="1">Treść</div>
<div id="2">Treść</div>
<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 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
$(document).ready(function() {
    var aDiv = 1;
    $('#select_div').change(function() {
        $('div#'+aDiv).css('display', 'none');
        aDiv = $(this + ' option:selected').attr('value');
        $('div#'+aDiv).css('display', 'block');
    });
});
[HTML] pobierz, plaintext 

Musisz to przetestować, bo pisałem z palucha. Ogólnie uważam, że jQuery jest wygodniejsze niż czyste JS (IMG:style_emoticons/default/smile.gif) . Powodzenia

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 
<html>
<hea
</head>
 
 
<body>
 
 
<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';};};}">
<option value="">Wybierz...</option>
<option value="1">Pokaż element 1</option>
<option value="2">Pokaż element 2</option>
<option value="3">Pokaż element 3</option>
</select>
 
<div id="element1" style="display: none;">
Element1
</div>
<div id="element2" style="display: none;">
Element2
</div>
<div id="element3" style="display: none;">
Element3
</div> 
 
 
</body
</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 
<html>
<hea
</head>
 
 
<body>
 
 
<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) 
{document.getElementById('element3').style.display='block', document.getElementById('element2').style.display='block', 
document.getElementById('element1').style.display='block';} else {document.getElementById('element3').style.display='none';};};}">
<option value="4">Wybierz...</option>
<option value="1">Pokaż element 1</option>
<option value="2">Pokaż element 1 i 2</option>
<option value="3">Pokaż element 1,2,3</option>
</select>
 
<div id="element1" style="display: none;">
Element1
</div>
<div id="element2" style="display: none;">
Element2
</div>
<div id="element3" style="display: none;">
Element3
</div> 
 
 
</body
</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 
<html>
<head>
</head>
 
 
<body>
 
 
<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';};};};}">
<option value="4">NIE</option>
<option value="1">Pokaż element 1</option>
<option value="2">Pokaż element 1 i 2</option>
<option value="3">Pokaż element 1,2,3</option>
<option value="5">Tak, więcej</option>
</select>
 
<div id="element1" style="display: none;">
Element1
</div>
<div id="element2" style="display: none;">
Element2
</div>
<div id="element3" style="display: none;">
Element3
</div> 
 
<div id="element4" style="display: none;">
Element4
</div> 
 
<div id="element5" style="display: none;">
Element5
</div> 
 
 
</body
</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 (IMG:style_emoticons/default/smile.gif)

[HTML] pobierz, plaintext 
<html>
<head>
</head>
 
 
<body>
 
<table height="0" cellpadding="0" cellspacing="0" border="0">
<tr> 
<td class="lewa">Czy?
</td>
<td class="prawa">
<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 {document.getElementById('element3').style.display='none', 
document.getElementById('element1').style.display='none', document.getElementById('element2').style.display='none';};};}">
<option value="NIE">NIE</option>
<option value="1">Tak, jednego</option>
<option value="2">Tak, dwóch</option>
<option value="3">Tak, trzech</option>
<option value="5">Tak, więcej</option>
</select>
</td></tr>
 
 
</table>
 
 
<div id="element1" style="display: none;">
<table height="0" cellpadding="0" cellspacing="0" border="0">
<tr> 
<td class="lewa">Czy?</td>
<td class="prawa">
<INPUT TYPE="radio" NAME="czy_wl_pos_pr_ja" VALUE="tak" onClick="document.getElementById('ukrytyw1').style.display='block';" 
 
/>tak <INPUT TYPE="radio" NAME="czy_ws1_ma" VALUE="nie" onClick="document.getElementById('ukrytyw1').style.display='none';" />nie
</td></tr>
 
 
</table>
 
<div id="ukrytyw1" style="DISPLAY: none">
<table height="0" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td class="lewa">Data</td>
  <td class="prawa"><input type="text" id="datepicker4" name="dataprwsp1"></td>
 </tr>
 </table>
</div>
 
 
</div>
 
 
<div id="element2" style="display: none;">
Element2
</div>
<div id="element3" style="display: none;">
Element3
</div> 
 
 
 
</body
</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

(IMG:http://img577.imageshack.us/img577/659/obazaznaczone.jpg)

Ten post edytował mich123 24.01.2012, 09:34:59