Plugin JS permettant de masquer des éléments (Cacher des items dans une liste déroulante)

Version imprimable

Bonjour ,
Je voudrais savoir s'il y aurait quelqu'un qui pourrait m'aider sur un sujet concernant le filtrage d'une liste déroulante , j'ai réalisé un code permettant de filtrer une liste déroulante afin d'afficher le contenu de mon array dans ma liste déroulante et de masquer ceux qui ne sont pas présents dedans

Voici ci-dessous le code :
Code:

1 2 3 4 5 6 7 let accept = ['2101','2102','2103','2104','2105','2106','2107','2108','2109','2110']; var liste = document.getElementById('boundlist-1201-listEl').childNodes[0].childNodes; let inner = ''; for(let i=0, maxi = liste.length; i < maxi ; i++) { if( ! accept.includes(liste[i].innerHTML.substr(0,4))) liste[i].style.display='none'; }
Cela fonctionne, mais seulement à partir de la console de chrome et il faut également cliquer sur la liste déroulante pour que celle-ci puisse être chargée sinon mon code ne fonctionne

Comment pourrais-je faire en sorte que mon code fonctionne dès le chargement de la page ?

Merci d'avance pour vos retours

25/11/2020, 15h27
Skunka

Salut,

une petite recherche google ne ferais pas de mal, c'est une notion très basique du javascript à mon avis: https://developer.mozilla.org/fr/doc...MContentLoaded

Le principe est simplement d'ajouter un listener sur ta page web. Une la page chargée, le contenu de la fonction s'exécute donc en y plaçant ton code, il sera automatique exécuter au chargement de ta page.

Cordialement,
Skunka.

Bonjour ,

J'ai effectivement effectuer pas mal de recherche sur le net à ce sujet et j'ai tenté le code suivant comprenant l’évènement DOMContentLoaded :
Code:

1 2 3 4 5 6 7 8 9 addEventListener('DOMContentLoaded', () => { let accept = ['2101','2102','2103','2104','2105','2106','2107','2108','2109','2110']; var liste = document.getElementById('boundlist-1201-listEl').childNodes[0].childNodes; let inner = ''; for(let i=0, maxi = liste.length; i < maxi ; i++) { if( ! accept.includes(liste[i].innerHTML.substr(0,4))) liste[i].style.display='none'; } });
Cependant lorsque je vais sur la page qui contient la liste déroulante , rien ne se passe , aucune erreur dans la console et aucun filtrage n'a lieu

Auriez vous une réponse à ce problème par hasard ?

Cordialement

Oui, tu ajoutes le listener mais sur aucun élément ! il faut le placer sur l'objet document:

Code:

1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', () => {
    let accept = ['2101','2102','2103','2104','2105','2106','2107','2108','2109','2110'];
    var liste = document.getElementById('boundlist-1201-listEl').childNodes[0].childNodes;
    let inner = '';
    for(let i=0, maxi = liste.length; i < maxi ; i++) {
        if( ! accept.includes(liste[i].innerHTML.substr(0,4)))
         liste[i].style.display='none';
    }
});

25/11/2020, 19h12
bilou93200

Merci beaucoup pour l'indication , cependant je trouve tout de même cela étonnant que suite a cet modification , rien ne change , je viens de recharger le plugin sur chrome , ensuite je me suis rediriger sur la page qui contient la liste déroulante mais celle ci n'est pas du tout filtrer , j'ai la totalité des champs alors que je souhaite avoir que le contenu de ma liste

Observe ce principe. Est-ce réaliste ou as-tu un système vraiment plus compliqué (hors données php, etc.)?
Parce que sinon, je ne vois pas bien le problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="liste" name="liste">
	<option>liste</option>
	<option value="un">2011truc</option>
	<option value="deux">2119machin</option>
	<option value="trois">2107truc</option>
	<option value="quatre">2107machin</option>
	<option value="cinq">2106bidule</option>
	<option value="six">2107bidule</option>
	<option value="sept">2106bidule</option>
	<option value="huit">2011machin</option>
	<option value="neuf">2106bidule</option>
	<option value="dix">2009bidule</option>
</select>

Code:

1
2
3
4
5
document.addEventListener('DOMContentLoaded', () => {
    let accept = ['2101','2102','2103','2104','2105','2106','2107','2108','2109','2110'];
    var liste = document.querySelectorAll("#liste option");
    liste.forEach(v=>{if(!accept.includes(v.text.slice(0,4))){v.style.display="none"}})
})