Discussion :

[bilou93200]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[bilou93200]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Skunka]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
    }
});

[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

[javatwister]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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"}})
})