optgroup verbergen met behulp van javascript
Ik probeer wat in javascript te maken (ik ben een beginner in javascript), maar ik loop tegen een probleempje aan.
Ik heb een <select> met meerdere <optgroup>'s. Nu wil ik bij een trigger, een of meerdere optgroups verbergen.
Ik dacht dat dat eenvoudig zou gaan met:
document.getElementsByTagName('optgroup').style.display.none
Maar ik krijg een foutmelding en er gebeurd ook niets.
Ik vermoed dat er helemaal geen manupuleerbare style-elementen bij optgroup horen.
Is er een andere eenvoudige wijze om dit voor elkaar te krijgen?
Gewijzigd op 12/01/2020 00:12:17 door J opla
Gewijzigd op 12/01/2020 00:12:04 door j opla
Mogelijke oplossing zou kunnen liggen in id attribuut of beter nog in een data attribuut.
Code (php)
1
<optgroup data-id="1">Een groep</optgroup>
Nu zou je met getElementsByTagName() alle optgroups kunnen doorlopen en dan degene die het juiste data-id attribuut heeft kunnen verbergen. Aangezien dit een aantal stappen vereist lijkt het me handig om het geheel in een functie te zetten.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function hideOptGroupWithId(id) {
var groups = document.getElementsByTagName("optgroup");
for(var i = 0 ; i < groups.length ; i++) {
if(groups[i].getAttribute("data-id") == id) {
groups[i].style.display = "none";
return; // nothing to do anymore so exit this function
}
}
}
hideOptGroupWithId(1);
var groups = document.getElementsByTagName("optgroup");
for(var i = 0 ; i < groups.length ; i++) {
if(groups[i].getAttribute("data-id") == id) {
groups[i].style.display = "none";
return; // nothing to do anymore so exit this function
}
}
}
hideOptGroupWithId(1);
Heb je dit getest? Het gaat mij niet om hoe ik bepaalde optgroups kan verbergen, maar het probleem is dat ".style" een foutmelding geeft.
Maar als je het getest hebt dan ga ik het nogmaals proberen. Graag even jouw bevestiging.
Toevoeging op 12/01/2020 00:25:32:
TypeError: document.getElementsByTagName(...).style is undefined
en je moet schrijven myElement.style.display = "none";
Toevoeging op 12/01/2020 01:04:50:
Nogmaals document.getElementsByTagName(...) levert je een array op. En een array heeft geen 'style' element.
Frank Nietbelangrijk op 12/01/2020 00:10:23:
Mogelijke oplossing zou kunnen liggen in id attribuut of beter nog in een data attribuut.
Zonder dit topic te willen stelen: waarom is data-id beter dan id?
Jan
Gewijzigd op 12/01/2020 08:57:31 door Jan R
1. een id attribuut moet volgens de html specificaties altijd beginnen met een
2. id attributen moeten in de gehele DOM uniek zijn. Dit is absoluut niet het geval bij data attributen.
Gewijzigd op 13/01/2020 16:13:29 door Frank Nietbelangrijk
Gewijzigd op 13/01/2020 13:08:38 door j opla