Toon posts:

[JavaScript] Probleem met updaten van select boxes

Pagina: 1
Acties:

woensdag 12 november 2003 15:26

Acties:

Verwijderd

Topicstarter
Ben bezig met een frontend voor rekening gegevens in de database, zitten momenteel 2 rekeningnummers in, van bepaalde stukken zijn geen gegevens (gewoon geen transacties). Om automatisch te kijken welke gegevens wel en niet beschikbaar zijn genereerde mijn php het volgende javascript:

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script language="JavaScript">
function UpdateList(object)
{
    object.jaar.options.length = 0;
    object.maand.options.length = 0;
    var defaultSelected = false;
    var selected = false;
    if (object.rekening.options[object.rekening.selectedIndex].value == "12345678")
    {
        var optionName = new Option("2003", "2003", defaultSelected, selected);
        var length = object.jaar.length;
        object.jaar.options[length] = optionName;
        var optionName = new Option("2002", "2002", defaultSelected, selected);
        var length = object.jaar.length;
        object.jaar.options[length] = optionName;
        if (object.jaar.options[object.jaar.selectedIndex].value == "2003")
        {
            var optionName = new Option("January", "1", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("February", "2", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("March", "3", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("April", "4", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("May", "5", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("June", "6", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("July", "7", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("August", "8", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("September", "9", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("October", "10", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("November", "11", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
        }
        if (object.jaar.options[object.jaar.selectedIndex].value == "2002")
        {
            var optionName = new Option("December", "12", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
        }
    }
    if (object.rekening.options[object.rekening.selectedIndex].value == "87654321")
    {
        var optionName = new Option("2003", "2003", defaultSelected, selected);
        var length = object.jaar.length;
        object.jaar.options[length] = optionName;
        var optionName = new Option("2002", "2002", defaultSelected, selected);
        var length = object.jaar.length;
        object.jaar.options[length] = optionName;
        if (object.jaar.options[object.jaar.selectedIndex].value == "2003")
        {
            var optionName = new Option("January", "1", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("February", "2", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("March", "3", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("April", "4", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("May", "5", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("June", "6", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("July", "7", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("August", "8", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("September", "9", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("October", "10", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
            var optionName = new Option("November", "11", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
        }
        if (object.jaar.options[object.jaar.selectedIndex].value == "2002")
        {
            var optionName = new Option("December", "12", defaultSelected, selected);
            var length = object.maand.length;
            object.maand.options[length] = optionName;
        }
    }
    object.maand.options[0].selected = true;
}
</script>


Dit alles werkt prima in combinatie met het volgende stukje test html:

code:
1
2
3
4
5
6
7
8
9
10
11

<select name="rekening" onChange="UpdateList(document.form);">
  <option value="-">-</option>
  <option value="12345678">12345678</option>
  <option value="87654321">87654321</option>
</select>
<select name="jaar" onChange="UpdateList(document.form);">
  <option value="-">-</option>
</select>
<select name="maand">
  <option value="-">-</option>
</select>


Dit alles werkt ook nog prima, hij geeft mij mooi 2002 en 2003 in de 2e select box en tot en met November in de maandboxen.

Maar nu het probleem:
Als ik van jaar wil wisselen en dus 2002 probeer te kiezen maakt hij d'r zelf 2003 van en reset hij tevens te maand.
Ik kan een beetje uit de weg maar JavaScript maar hier kom ik niet meer bij.
Bovenin wordt dit gedaan:
code:
1
2

object.jaar.options.length = 0;
object.maand.options.length = 0;


Als ik die ene van jaar deruit gooi dan krijg ik wel een javascript error dat month.0 geen object is, behalve van het feit dat die select box met jaren steeds groter wordt (komt steeds 2002 en 2003 bij) werkt het dan wel. Op bovenstaande punten na natuurlijk.

Wie kan mij een gouden tip geven? :)

woensdag 12 november 2003 16:54

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 17:43

crisp

Devver

Pixelated

zomaar even een idee om het geheel wat gestructureerder te maken, kijk maar of je er wat mee kan:

HTML:
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

<html>
<head>
<title>test</title>
<script type="text/javascript">

var rek = ['0123456','7891234','6666666'];

var jaar = [];
jaar['0123456'] = ['2002','2003'];
jaar['7891234'] = ['2002','2003'];
jaar['6666666'] = ['2000','2001','2002'];

var maand = [];
maand['2000'] = ['januari','februari','maart','april','mei','juni','juli',
                 'augustus','september','oktober','november','december'];
maand['2001'] = ['januari','februari','maart','april','mei','juni','juli',
                 'augustus','september','oktober','november','december'];
maand['2002'] = ['januari','februari','maart','april','mei','juni','juli',
                 'augustus','september','oktober','november','december'];
maand['2003'] = ['januari','februari','maart','april','mei','juni','juli',
                 'augustus','september','oktober','november'];

function fillSelect(el, arr) {

  el.options.length = 0;

  for (var i=0, j = arr.length; i < j; i++) {
    el[i] = new Option(arr[i],arr[i]);
  }

  el.selectedIndex = 0;
  if (typeof el.onchange == 'function') el.onchange();
  
}


</script>
<body onload="fillSelect(document.forms['rekForm'].elements['selrek'],rek)">
<form id="rekForm" action="#">
  <select style="width:120px" name="selrek"
    onchange="fillSelect(this.form.elements['seljaar'],jaar[this.options[this.selectedIndex].value])">
  </select><br />
  <select style="width:120px" name="seljaar"
    onchange="fillSelect(this.form.elements['selmaand'],maand[this.options[this.selectedIndex].value])">
  </select><br />
  <select style="width:120px" name="selmaand"></select>
</form>
</body>
</html>

Intentionally left blank

woensdag 12 november 2003 21:04

Acties:

Verwijderd

Topicstarter
Mjah, dat maakt het een heel stuk lastiger om te automatiseren met m'n php. Want van rekening 1 heb ik misschien maar tot Juli, en van rekening 2 tot vandaag (November dus).

Uiteindelijke doel is dat de gebruikers altijd output zullen krijgen, want als ze december 2003 kiezen krijgen ze bijv. niks of een error, en dan piepen ze weer gelijk waarom ze niks zien (en het is uiteraard nooit hun schuld, die stomme computer altijd maar 8(7), dat wil ik voorkomen :)

Misschien is het handig, misschien ook niet:
PHP:
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

<?php

switch ($_GET["action"]) {
        default:
                echo '<script language="JavaScript">';
                echo 'function UpdateJaar(object) {';
                echo 'object.jaar.options.length = 0;';
                echo 'var defaultSelected = false;';
                echo 'var selected = false;';

                $query = mysql_query('SELECT DISTINCT(rekening) FROM bank');
                while ($output = mysql_fetch_array($query, MYSQL_ASSOC)) {
                        echo 'if (object.rekening.options[object.rekening.selectedIndex].value == "'. $output["rekening"] .'") {';
                        $nestedQuery = mysql_query('SELECT DISTINCT(YEAR(datum)) AS jaar FROM bank') or die(mysql_error());
                        while ($nestedOutput = mysql_fetch_array($nestedQuery, MYSQL_ASSOC)) {
                                echo 'var optionName = new Option("'. $nestedOutput["jaar"] .'", "'. $nestedOutput["jaar"] .'", defaultSelected, selected);';
                                echo 'var length = object.jaar.length;';
                                echo 'object.jaar.options[length] = optionName;';
                        }

                        $nestedQuery = mysql_query('SELECT DISTINCT(YEAR(datum)) AS jaar FROM bank') or die(mysql_error());
                        while ($nestedOutput = mysql_fetch_array($nestedQuery, MYSQL_ASSOC)) {
                                echo 'if (object.jaar.options[object.jaar.selectedIndex].value == "'. $nestedOutput["jaar"] .'") {';

                                $nestedQuery2 = mysql_query('SELECT DISTINCT(MONTHNAME(datum)) AS maand_naam, MONTH(datum) AS maand_nummer FROM bank WHERE YEAR(datum) = "'. $nestedOutput["jaar"] .'"') or die(mysql_error());
                                while ($nestedOutput2 = mysql_fetch_array($nestedQuery2, MYSQL_ASSOC)) {
                                        echo 'var optionName = new Option("'. $nestedOutput2["maand_naam"] .'", "'. $nestedOutput2["maand_nummer"] .'", defaultSelected, selected);';
                                        echo 'var length = object.maand.length;';
                                        echo 'object.maand.options[length] = optionName;';
                                }

                                echo '}';
                        }
                        echo '}';
                }

                echo 'object.jaar.options[0].selected = true;';
                echo 'object.maand.options[0].selected = true;';

                echo '}';
                echo '</script>';

                echo '<form name="form" method="post" action="'. $_SERVER["SCRIPT_NAME"] .'?parent='. $_SESSION["parent"] .'&child='. $_SESSION["child"] .'">';

                echo '<select name="rekening" onChange="UpdateList(document.form);">';
                echo '<option value="-">-</option>';

                $query = mysql_query('SELECT DISTINCT(rekening) FROM bank') or die(mysql_error());
                while ($output = mysql_fetch_array($query, MYSQL_ASSOC)) {
                        echo '<option value="'. $output["rekening"] .'">'. $output["rekening"] .'</option>';
                }
                echo '</select>';

                echo '<select name="jaar" onChange="UpdateList(document.form);">';
                echo '<option value="-">-</option>';

                echo '</select>';

                echo '<select name="maand">';
                echo '<option value="-">-</option>';
                echo '</select>';
}

?>


En nee, dit is niet netjes, dit is puur om het in werkend in elkaar te hebben, de rest komt later wel :)

[edit]Trouwens, met 2 werkte het wel, ik heb nml dit als werkend voorbeeld gehad, het ging fout toen ik meerdere rekeningen derin meukte

[ Voor 16% gewijzigd door Verwijderd op 12-11-2003 21:07 ]

woensdag 12 november 2003 22:27

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 17:43

crisp

Devver

Pixelated

Het ging er ook niet om dat het precies aan zou sluiten op wat je nodig hebt, maar ook om te laten zien dat als je je data in je JS wat anders structureert je met een paar simpele functies vervolgens de logica kan afhandelen. Dit was wel een erg sterk voorbeeld waarbij er een relatie tussen rekening en jaar bestaat, en apart een relatie tussen jaar en beschikbare maanden, waardoor ik heel smerig dezelfde functie recursief kon gebruiken :P
In jouw geval staat de jaar - maanden relatie niet los van de rekening, maar ook dat is wel te ondervangen. Zoals je nu de data integreert in je functies verdient niet echt een schoonheidsprijs.

Dat bij het wisselen van je jaar hij toch weer 2003 als selected waarde neemt klopt, omdat je die select ook weer opnieuw vult, bij het wisselen van het jaar zou je alleen de select met de maanden opnieuw hoeven vullen.

[ Voor 3% gewijzigd door crisp op 12-11-2003 22:28 ]

Intentionally left blank

Reageer