Toon posts:

[Javascript] dynamisch pulldown vullen

Pagina: 1
Acties:

woensdag 29 september 2004 18:22

Acties:

Verwijderd

Topicstarter
Ik heb 2 pulldown menus. Als je op de bovenste klikt (onchange) wordt de inhoud van de onderste pulldown dyanmisch gevuld aan de hand van de geselecteerde waarde van de bovenste pulldown m.b.v.

dataverkeer.options[0] = new Option("30");

Nu wil ik wanneer deze laatst pulldown is 'gevuld' en nadat de bezoeker een waarde heeft geselecteerd mb.v. een onchange() een tekstveld vullen met de waarde die geselecteerd is in het 2e pulldown menu.

Ik krijg de waarde met javascript er niet uit, omdat de waardes in het 2e pulldown menu dynamisch gevuld worden, en niet in html verwerkt worden??

Als je het formulier submit, krijgt ie echter wel de geselecteerde waardes, maar ik wil juist dat ie gelijktijdig automatisch veranderd, zonder de pagina te refreshen.

Alvast bedankt

woensdag 29 september 2004 18:39

Acties:
  • bigbeng
  • Registratie: Augustus 2000
  • Laatst online: 26-11-2021

bigbeng

Ik doe erg mn best om te begrijpen wat je nu precies wilt, maar het is me nog niet helemaal duidelijk.

Wordt je onchange event wel getriggerd? Of slaat ie dat helemaal over? De waardes zouden namelijk wel degelijk benaderbaar moeten zijn met javascript, je voegt immers gewoon options toe aan het DOM.

Dus zou je middels
JavaScript:
1

document.<formname>.<selectname>.options[document.<formname>.<selectname>.selectedIndex].value

de waarde van de tweede select moeten kunnen uitlezen.

woensdag 29 september 2004 19:49

Acties:

Verwijderd

Topicstarter
Ik heb 2 pulldown menus en een tekstveld in 1 form. Het 2e pulldown menu wordt middels

dataverkeer.options[0] = new Option("5");
dataverkeer.options[1] = new Option("10");

gevuld. Als ik automatisch in het tekstveld de geselecteerde waarde uit pulldown list 2 wil krijgen, zodra er een waarde geselecteerd wordt in die pulldown list 2 (mbv onchange())moet ik die uitlezen. Maar dit werkt dus niet.

woensdag 29 september 2004 20:50

Acties:

Verwijderd

Alsjeblieft...

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<html>
  <head>
    <title>Voorbeeld</title>
    <style type="text/css">

  label, select, h1 {
    font-family:    Verdana, Arial, Helvetica, sans-serif;
    font-size:      11px;
  }

  label, select {
    display:        block;
    float:          left;
    margin-top:     5px;
    width:          120px;
  }

  h1 {
    margin:         0px;
    margin-bottom:  7px;
    font-size:      13px;
  }

  label {
    padding-top:    3px;
    padding-bottom: 8px;
  }

  span {
    float: left;
    border-bottom: 1px solid #CCCCCC;
  }

  br {
    clear: left;
  }
    </style>
    <script type="text/javascript">
var d = document;
function emptyNode(o) {
  var i = o.childNodes.length;
  while (i--) {
    o.removeChild(o.childNodes[i]);
  }
}

window.onload = function (e) {
  var oFirst = d.getElementById("first");  
  oFirst.onchange = function (e) {
    switch (this.selectedIndex) {
      case 1:
        emptyNode(oSecond);
        for (var i = 1; i < 11; i++) {
          var oOption = d.createElement("OPTION");
          oOption.appendChild(d.createTextNode(i + " van 10"));
          oSecond.appendChild(oOption);
        }
        break;
      case 2:
        emptyNode(oSecond);
        for (var i = 11; i < 21; i++) {
          var oOption = d.createElement("OPTION");
          oOption.appendChild(d.createTextNode(i + " van 21"));
          oSecond.appendChild(oOption);
        }
        break;
    }
  }
  var oSecond = d.getElementById("second");
}
    </script>
  </head>
  <body>
    <h1>Pulldown example</h1>
    <span>
      <label for="first">Nummer een: </label>
      <select id="first">
        <option>------select------</option>
        <option>1-10</option>
        <option>11-20</option>
      </select>
    </span>
    <br />
    <span>
      <label for="second">Nummer twee: </label>
      <select id="second"></select>
    </span>
  </body>
</html>
Reageer