:strip_icc():strip_exif()/u/78725/train-icon3.jpg?f=community)
Op vraag van een collega ben ik bezig met het aanpassen van wat oude, interne pagina's en 1 van de vragen daarbij was om een dynamische filter te plaatsen in een formulier zodat de selectie in 1 dropdown box een invloed heeft op de beschikbare elementen in een andere dropdown box. Omdat het jaren geleden was dat ik nog iets met HTML gedaan heb, ben ik op zoek gegaan naar een voorbeeld online en heb dat als basis genomen. En als mijn formulier maar 1 enkele rij zou hebben, dan werkt dit perfect, maar van zodra er meerdere rijen zijn, dan heeft een actie op 1 rij een nefaste invloed op de laatst bewerkte rij ondanks dat ik altijd men elementen selecteer op een uniek id.
Bij het debuggen in de browser kwam ik er uiteindelijk achter dat wanneer de appendchild (lijn 95 hieronder) wordt uitgevoerd om de lijst in zijn originele staat te herstellen voordat de filter opnieuw wordt toegepast, dat dat het moment is waarop in de laatst bewerkte rij diezelfde select wordt leeggemaakt ondanks dat ik in de debugger kan zien dat er zelfs geen calls gebeuren naar .remove op dat moment.
Ik heb moeite om te begrijpen wat er mis gaat of hoe een append iets kan verwijderen. Hieronder is een vereenvoudigde vorm van wat ik probeer te doen waarin het effect zichtbaar is. Al moet ik me excuseren voor de op dit moment iets minder leesbare code
Bij het debuggen in de browser kwam ik er uiteindelijk achter dat wanneer de appendchild (lijn 95 hieronder) wordt uitgevoerd om de lijst in zijn originele staat te herstellen voordat de filter opnieuw wordt toegepast, dat dat het moment is waarop in de laatst bewerkte rij diezelfde select wordt leeggemaakt ondanks dat ik in de debugger kan zien dat er zelfs geen calls gebeuren naar .remove op dat moment.
Ik heb moeite om te begrijpen wat er mis gaat of hoe een append iets kan verwijderen. Hieronder is een vereenvoudigde vorm van wat ik probeer te doen waarin het effect zichtbaar is. Al moet ik me excuseren voor de op dit moment iets minder leesbare code
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
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
113
114
115
116
| <html> <body> <table id="details"> <tr> <th>location</th> <th>list</th> </tr> <tr> <td> <select name="location" onChange="filterList(this);" id="loc1"> <option value="AMS">Amsterdam</option> <option value="BRU">Brussel</option> </select> </td> <td> <select name="list" id="list1"> <option value="">None</option> <option value="AMS list">AMS list</option> <option value="BRU list">BRU list</option> </select> </td> </tr> <tr> <td> <select name="location" onChange="filterList(this);" id="loc2"> <option value="AMS">Amsterdam</option> <option value="BRU">Brussel</option> </select> </td> <td> <select name="list" id="list2"> <option value="">None</option> <option value="AMS list">AMS list</option> <option value="BRU list">BRU list</option> </select> </td> </tr> <tr> <td> <select name="location" onChange="filterList(this);" id="loc3"> <option value="AMS">Amsterdam</option> <option value="BRU">Brussel</option> </select> </td> <td> <select name="list" id="list3"> <option value="">None</option> <option value="AMS list">AMS list</option> <option value="BRU list">BRU list</option> </select> </td> </tr> </table> <script language="JavaScript"> var optionsCache = []; function filterList(office) { var value = office.value.toLowerCase(); //get the row we are working on from this element's ID var seq = office.id.substring(3) //restore the list before filtering again restoreOptions(seq); var list = 'list'+seq //remove from bottom up to be certain the element exist ///do not remove first element as this is the option for no list for (var i=document.getElementById(list).options.length-1; i>=1; i--) { opt = document.getElementById(list).options[i]; if (opt.text.toLowerCase().indexOf(value) == -1) { document.getElementById(list).removeChild(opt) console.log("removed "+opt.text.toLowerCase()) } } } // Restore select to original state function restoreOptions(row) { var name = 'list'+row; var sel = document.getElementById(name); console.log("restore "+name); //empty the current list before adding everything back in from the cache var i, L=sel.options.length-1; for (i = L; i>=0; i--) { sel.remove(i); } for (var j=0, jLen=optionsCache.length; j<jLen; j++) { //how can this line remove options from another elementid? sel.appendChild(optionsCache[j]); } } window.onload = function() { // Save the original list into cache to restore when we switch office for (var i=0, iLen=document.getElementById('list1').options.length; i<iLen; i++) { optionsCache.push(document.getElementById('list1').options[i]); } //apply the filter to each row var rows = document.getElementById("details").rows.length; for (var i=1; i<rows; i++) { name='loc'+i filterList(document.getElementById(name)); } } </script> </body> |
No keyboard detected. Press F1 to continue.
:strip_exif()/u/21451/spinal150.gif?f=community)
En daar zit je dan zo lang op te zoeken. Nu ik dat weet zal ik wel een oplossing kunnen verzinnen.