Toon posts:

[JavaScript] Dynamische DropDown menu's

Pagina: 1
Acties:

donderdag 17 januari 2002 23:56

Acties:
  • KompjoeFriek
  • Registratie: Maart 2001
  • Laatst online: 02-01 05:18

KompjoeFriek

Statsidioot

Topicstarter
Hoe kan ik, als ik 2 DropDown boxen heb, als er in de eerste dropdownbox een selectie is gemaakt, in het 2e dropdownbox sub-gegevens in laten vullen waar ze dan uit kunnen kiezen?

bv. in deze situatie:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
<head>
<title>Testpagina</title>
</head>
<body>
<form method="POST" action="test.asp" name="testform">
  <div align="center"><center><p><select name="D1" size="1">
    <option selected value="GEENKEUZE">[ -- Maak een Keuze -- ]</option>
    <option value="keuze1">keuze1</option>
    <option value="keuze2">keuze2</option>
    <option value="keuze3">keuze3</option>
  </select><br>
  <select name="D2" size="1">
    <option selected value="GEENKEUZE">[ -- Maak een Keuze -- ]</option>
  </select><br>
  <input type="submit" value="Submit" name="B1">
  <input type="reset" value="Reset" name="B2"></p>
  </center></div>
</form>
</body>
</html>

nadat er in het bovenste menu een keuze is gemaakt, wil ik het 2e menu gevuld hebben met een aantal waarde afhankelijk van de selectie die ze hebben gemaakt in het eerste menu.

Weet er iemand hoe dit moet?

WhatPulse! - Rosetta@Home - Docking@Home

vrijdag 18 januari 2002 00:01

Acties:
  • Annie
  • Registratie: Juni 1999
  • Laatst online: 25-11-2021

Annie

amateur megalomaan

er zijn ontzettend veel voorbeelden te vinden op het net
waaronder deze:
http://www.webreference.com/programming/javascript/beginning/chap6/5/

Today's subliminal thought is:

vrijdag 18 januari 2002 00:05

Acties:

Verwijderd

Ik denk dat je zoiets bedoeld http://hotwired.lycos.com/webmonkey/98/04/index3a_page10.html?tw=programming

vrijdag 18 januari 2002 00:13

Acties:
  • KompjoeFriek
  • Registratie: Maart 2001
  • Laatst online: 02-01 05:18

KompjoeFriek

Statsidioot

Topicstarter
Op vrijdag 18 januari 2002 00:05 schreef RealGamer het volgende:
Ik denk dat je zoiets bedoeld
>:) Dat is precies wat ik bedoel! >:)

thanx voor jullie snelle reacties!

WhatPulse! - Rosetta@Home - Docking@Home

vrijdag 18 januari 2002 01:18

Acties:
  • KompjoeFriek
  • Registratie: Maart 2001
  • Laatst online: 02-01 05:18

KompjoeFriek

Statsidioot

Topicstarter
het is toch niet PRECIES wat ik bedoel

Als ik nou 3 array's heb die niet even lang zijn, dan werkt hij niet meer goed!

Hier even een testpagina waar jullie mij eventueel mee zouden kunne helpen
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<script language="JavaScript">

var Keuze1 = new Array("Test1","Test2","Test3");
var Keuze2 = new Array("Test4", "Test5","Test6");
var Keuze3 = new Array("Test7", "Test8","Test9");

function swapOptions(the_array_name)
{
  var numbers_select = window.document.testform.D2;
  var the_array = eval(the_array_name);
  setOptionText(window.document.testform.D2, the_array);
}

function setOptionText(the_select, the_array)
{
  for (loop=0; loop < the_select.options.length; loop++)
  {
    the_select.options[loop+1].text = the_array[loop];
  }
}

</script>

<html>

<head>
<title>Testpagina</title>
</head>

<body>

<form method="POST" action="test.asp" name="testform">
  <div align="center"><center><p><select name="D1" size="1"
  onChange="swapOptions (window.document.testform.D1.options[selectedIndex].value);">
    <option selected value="GEENKEUZE">[ -- Maak een Keuze -- ]</option>
    <option value="Keuze1">Keuze1</option>
    <option value="Keuze2">Keuze2</option>
    <option value="Keuze3">Keuze3</option>
  </select><br>
  <select name="D2" size="1">
    <option selected value="GEENKEUZE">[ -- Maak een Keuze -- ]</option>
    <option value="Keuze1">Test0</option>
    <option value="Keuze1">Test0</option>
    <option value="Keuze1">Test0</option>
  </select><br>
  <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
  </center></div>
</form>
</body>
</html>

WhatPulse! - Rosetta@Home - Docking@Home

vrijdag 18 januari 2002 01:24

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:42

crisp

Devver

Pixelated

gooi 'm naar /13 dan ga ik er misschien over nadenken ;)

Intentionally left blank

vrijdag 18 januari 2002 07:54

Acties:
  • OzBoz
  • Registratie: Maart 2000
  • Laatst online: 09-09 19:36

OzBoz

.:.H.:.I.:.P.:.

Naar /13 gegooid vanuit P&W zodat crisp er misschien over gaat nadenken ;)

My Fizion | My 3D prints | LinkedIn

vrijdag 18 januari 2002 09:06

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:42

crisp

Devver

Pixelated

* crisp heeft erover nagedacht ;)
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function setOptionText(the_select, the_array)
{
  var max = Math.max(the_select.options.length, the_array.length)
  for (loop=0; loop < max; loop++)
  {
    if (the_select.options[loop+1])
    {
    if (the_array[loop])
    {
      the_select.options[loop+1].text = the_array[loop];
    } else {
      the_select.options[loop+1] = null;
    }
    } else if (the_array[loop]) {
    the_select.options[loop+1] = new Option(the_array[loop], the_array[loop], false, false);
    }
  }
}

Intentionally left blank

vrijdag 18 januari 2002 09:27

Acties:
  • Annie
  • Registratie: Juni 1999
  • Laatst online: 25-11-2021

Annie

amateur megalomaan

* Annie vraagt zich af waarom er zo moeilijk wordt gedaan :?
code:
1
2
3
4
5
6
7
8

function setOptionText(the_select, the_array)
{
  the_select.length = 1;
  for (loop=0; loop < the_array.length; loop++)
  {
    the_select.options[loop+1] = new Option(the_array[loop]);
  }
}

/edit:
Ah, iets te vroeg gepost. :o (i need more coffee)
Hoe belangrijk zijn de values van de options in D2? Deze worden niet gevuld in het voorbeeldje van mij.
Is natuurlijk wel simpel op te lossen door de array uit te breiden met de values ==> array('text1', 'value1', 'text2', 'value2') en de for-loop iets aan te passen.

Today's subliminal thought is:

vrijdag 18 januari 2002 10:17

Acties:

Verwijderd

Zo heb ik het opgelost:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function addValue(v)
{
    newValue = v;
    var newValueArray;
    newValueArray = v.split("|");
    if (newValueArray.length >= 2)
    {
        var o = document.createElement("option");
        o.value=newValueArray[0];
        o.text=newValueArray[1];
        mySelect.add(o);
    }
    else
        alert("Niet genoeg waarden");
}
--------
<select ID="mySelect" size="1" onChange="selectChanged()">

vrijdag 18 januari 2002 11:31

Acties:
  • KompjoeFriek
  • Registratie: Maart 2001
  • Laatst online: 02-01 05:18

KompjoeFriek

Statsidioot

Topicstarter
Op vrijdag 18 januari 2002 09:06 schreef crisp het volgende:
* crisp heeft erover nagedacht ;)
Bdankt dat je 't toch wou vertellen, het is heel netjes opgelost, maar nou heb ik in Array Keuze2 1 variabele meer, en in Keuze3 1 variabele minder.
Alles gaat dan nog goed, todat in na Keuze2 Keuze3 kies. Als of hij iedere keer maar 1 veld kan verwijderen. Met velden toevoegen gaat alles goed :)

Hier id de code die ik nou gebruikt heb:
code:
1



And BTW, ik dacht toch echt dat dit bij Webscripting hoort, of tellen daar alleen ServerSide scripts mee :?




edit:
[quote]

Op vrijdag 18 januari 2002 09:27 schreef Annie het volgende:

* Annie vraagt zich af waarom er zo moeilijk wordt gedaan :?

[/quote]



Precies, waarom doe ik zo moeilijk? JOU manier, die veel korter is, werkt wel goed!

nou is alles opgelost, bedankt voor jullie hulp! *D



                    


                    
WhatPulse! - Rosetta@Home - Docking@Home

            


    




    

    
    

        

        

            

                vrijdag 18 januari 2002 12:09
            

        

                                    

                    Acties: 
                    
    
                        
    • 
                    

                

                        


    

        

                    

                

                    
    
                        
  • crisp
                        
  • Registratie: Februari 2000
    • 
                        
  • 
                            Laatst online: 08:42
                                                    
    • 
                    

                    
                                    

            

        
        

            

                crisp                
            


            
Devver


            
Pixelated
                                


                    
            
                    
                            
        
        
                                                        


    

        

            weer wat geleerd:


code:
1

the_select.length = 1;


Die kon ik nog niet! :)
                    


                    
Intentionally left blank

            


    





            


            
                    

        

            
                Pagina: 1
            
        


        
            




            
                


                
                

                        
            

                                Reageer