Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dynamiczny select
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
timii
27.08.2006, 14:25:53
a jak zrobic cos takiego: http://webmaster.helion.pl/kurshtml/skrypt/doubmenu.htm tylko z trzeba selectami i trzecie jest zalezne od drugiego :/

probuje cos zdzialac ale mi nie wychodzi :/
gekon
28.08.2006, 12:10:01 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title></title>
  5. <script type="text/javascript">
  6. function changeSelect() {
  7. 	var first = document.getElementById('one');
  8. 	var second = document.getElementById('two')
  9. 	if(first && second){
  10. 		first.onchange = function(){
  11. 			second.selectedIndex = first.selectedIndex;
  12. 		}
  13. 	}
  14. }
  15.  
  16. window.onload = function(){
  17. 	changeSelect();
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <select id="one">
  23. 	<option value="1">1</option>
  24. 	<option value="2">2</option>
  25. 	<option value="3">3</option>
  26. </select>
  27. <select id="two">
  28. 	<option value="5">5</option>
  29. 	<option value="6">6</option>
  30. 	<option value="7">7</option>
  31. </select>
  32. </body>
[HTML] pobierz, plaintext


Masz dwa przykłady, powinno wystarczyć.
revyag
28.08.2006, 12:56:10
@gekon to będzie trochę bardziej skomplikowane. Zauważ że dla każdej opcji z jednego selecta są 4 w następny. Więc w sumie 4 zestawy opcji. Jeśli @timi chce mieć dodatkowo jeszcze jeden select to liczba opcji w nim będzie 4 razy większa niż w drugim

1 select -> 2 select z 4 zestawami opcji dla każdej opcji z pierwszego selecta
3 select -> z 4 zestawami opcji dla każdej z opcji z drugiego selecta czyli w sumie 16 zestawów opcji
Kod
<script type="text/javascript">
function $(arg) {
    return document.getElementById(arg);
}

//sel - select w którym będą tworzone opcje
//opt - tablica z opcjami, które będą w select'cie
function addoptions(sel,opt) {
    var ct = opt.length;
    for(var i = 0; i < ct; i++) {
        item = document.createElement("option");
        item.value=opt[i];
        item.appendChild(document.createTextNode(opt[i]));
        sel.appendChild(item);
    }
}

//elem - select, level - który select
function show(elem,level) {
    
    var sid = new Array("second","third");
    
    var tree = new Array(
        new Array(                          //drugi select
            new Array("opcja 011","opcja 012","opcja 013","opcja 014"),
            new Array("opcja 021","opcja 022","opcja 023","opcja 024"),
            new Array("opcja 031","opcja 032","opcja 033","opcja 034"),
            new Array("opcja 041","opcja 042","opcja 043","opcja 044")
        ),
        new Array(                          //trzeci select
            new Array(                      
                new Array("opcja 0111","opcja 0112","opcja 0113","opcja 0114"),    
                new Array("opcja 0121","opcja 0122","opcja 0123","opcja 0124"),    
                new Array("opcja 0131","opcja 0132","opcja 0133","opcja 0134"),
                new Array("opcja 0141","opcja 0142","opcja 0143","opcja 0144")
            ),
            new Array(                      
                new Array("opcja 0211","opcja 0212","opcja 0213","opcja 0214"),    
                new Array("opcja 0221","opcja 0222","opcja 0223","opcja 0224"),    
                new Array("opcja 0231","opcja 0232","opcja 0233","opcja 0234"),
                new Array("opcja 0241","opcja 0242","opcja 0243","opcja 0244")
            ),
            
            new Array(                      
                new Array("opcja 0311","opcja 0312","opcja 0313","opcja 0314"),    
                new Array("opcja 0321","opcja 0322","opcja 0323","opcja 0324"),    
                new Array("opcja 0331","opcja 0332","opcja 0333","opcja 0334"),
                new Array("opcja 0341","opcja 0342","opcja 0343","opcja 0344")
            ),
            new Array(                      
                new Array("opcja 0411","opcja 0412","opcja 0413","opcja 0414"),    
                new Array("opcja 0421","opcja 0422","opcja 0423","opcja 0424"),    
                new Array("opcja 0431","opcja 0432","opcja 0433","opcja 0434"),
                new Array("opcja 0441","opcja 0442","opcja 0443","opcja 0444")
            )
        )        
    );
    
    var sel = $(sid[level]);
    
    while(sel.firstChild) {
        sel.removeChild(sel.firstChild);
    }
    
    if(sid[level] == "second") {
        $("second").onclick=function() {
            show(this,1);
        }
    }
    
    addoptions(
        sel,
        (level==0) ? tree[level][elem.selectedIndex] :
        tree[level][$("first").selectedIndex][elem.selectedIndex]
    );
}
</script>

[HTML] pobierz, plaintext 
  1. <select id="first" onclick="show(this,0)">
  2.     <option value="f01">opcja 01</option>
  3.     <option value="f02">opcja 02</option>
  4.     <option value="f03">opcja 03</option>   
  5.     <option value="f04">opcja 04</option>
  6. </select>
  7. <select id="second">
  8. </select>
  9. <select id="third">
  10. </select>
[HTML] pobierz, plaintext
timii
29.08.2006, 12:22:41
revyag ale to co napisales to nie dziala tongue.gif sproboje to przejrzec winksmiley.jpg
revyag
29.08.2006, 12:50:33
Działa działa. Pewnie coś źle skopiowałeś.
http://projekty.producer.pl/rvg/sel/
timii
29.08.2006, 12:59:18
u mnie w IE nie dziala :/
revyag
29.08.2006, 13:09:37
Nie sprawdzałem pod ie. Ale żeby pod tą przeglądarką też było ok w funkcji addoptions na samym początku dodaj:
Kod
var item;
timii
30.08.2006, 11:55:57
super dziala juz pod IE smile.gif

a jeszce jedno hehe winksmiley.jpg jak zrobic zeby z 1. selecta przekazywal wartosc do drugiego selecta i wyciagal dane z mysql o tej wartosci do 2. selecta i tak samo z 2. do 3.

myslalem nad tym i jak to wkleic do tego ale jest problem...

revyag to co zrobiles jest super smile.gif tylko jeszcze jedno do tego by pasowalo smile.gif

jak wybierzesz z pierwszego sel to pojawia sie w drugim, i jak w drugim to w trzecim.
tylko ze jak znowu sie wybierze z pierwszego to w trzecim nie znika wybrana opcja czasami to jest mylace. Probowalem cos zdzalac ale z JavaScript mi kiepsko idize. mysle ze to dla Ciebie zaden problem smile.gif

pomozesz ? prosze smile.gif
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.