optgroup verbergen met behulp van javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

J opla

j opla

11/01/2020 21:27:10
Quote Anchor link
Hoi,

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
 
PHP hulp

PHP hulp

05/07/2020 16:40:10
 
- SanThe -

- SanThe -

11/01/2020 22:22:45
 
J opla

j opla

12/01/2020 00:10:17
Quote Anchor link
ja? en? als je er op wil wijzen dat ik "getElementsByTagName" had moeten gebruiken ... dan deed ik dat ook, alleen had ik het in mijn tekst verkeerd gezet, nu aangepast.
Gewijzigd op 12/01/2020 00:12:04 door j opla
 
Frank Nietbelangrijk

Frank Nietbelangrijk

12/01/2020 00:10:23
Quote Anchor link
Ofwel die bestaat dus niet. getElementsByTagName() bestaat wel. Let hierbij op de S aan het einde van Elements. Dit geeft al aan dat er meerdere elementen gevonden kunnen worden en je dus een array terug mag verwachten. Je geeft aan dat je één of meerder optgroups wilt verbergen en dat gaat dus (bijna) niet met getElementsByTagName() omdat deze altijd ALLE groupopts zal geven.

Mogelijke oplossing zou kunnen liggen in id attribuut of beter nog in een data attribuut.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
 
J opla

j opla

12/01/2020 00:17:36
Quote Anchor link
Beste Frank,

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
 
Frank Nietbelangrijk

Frank Nietbelangrijk

12/01/2020 00:58:30
Quote Anchor link
getest en werkt.

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.
 
Jan R

Jan R

12/01/2020 08:56:54
Quote Anchor link
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
 
Frank Nietbelangrijk

Frank Nietbelangrijk

13/01/2020 01:41:50
Quote Anchor link
@Jan

1. een id attribuut moet volgens de html specificaties altijd beginnen met een karakter letter waardoor het direct al minder geschikt is om een "database ID" of anders gezegd een numeriek id in op te slaan.

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
 
Jan R

Jan R

13/01/2020 05:45:35
Quote Anchor link
Bedankt
 
J opla

j opla

13/01/2020 12:48:19
Quote Anchor link
@Frank: Dank je wel voor je berichten. Ik snap nu mijn denkfout.
Gewijzigd op 13/01/2020 13:08:38 door j opla
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.