Bonjour , 

Je voudrais savoir s'il y aurait quelqu'un qui pourrais m'aider sur un sujet concernant le filtrage d'une liste deroulante :

Mon objectif serait d'afficher le contenu de mon array dans ma liste déroulante et de masquer ceux qui ne sont pas présent dedans

A partir de la console , j'ai réussi à afficher des éléments mais sans array et pour éviter de répéter plusieurs fois la même chose je voudrais le faire fonctionner avec un array 

De plus , vous trouverez ci-dessous ce que j'ai fais au début :

var liste = document.getElementById('Nom-De-l'id').childNodes[0].childNodes;

for (var i = 0; i < liste.length; i++) {
	 if (liste[i].innerHTML.substr(0,4)!='2100' && liste[i].innerHTML.substr(0,4)!='2101') 
	 {
	 		console.log(liste[i].innerHTML);

liste[i].style.display='none';

	 }

	
}

Merci Beaucoup pour votre aide

Salut,

[...document.getElementById('__ID__').options].filter(x => !(x.style.display = null) && [2100, 2101].some(y => x.innerHTML.substr(0, 4) == y)).forEach(x => x.style.display = 'none');

• 1) Tu récupère ton 'select' avec 'document.getElementById' (par exemple)
• 2) Tu récupère les options grâce à la propriété 'option' de ton 'select' sous la forme d'une 'HTMLOptionsCollection'
• 3) Tu convertie ton 'HTMLOptionsCollection' en un array classique grâce à l'opérateur spread ('...') dans un array vide ('[]') pour pouvoir utiliser les méthodes 'filter' et 'forEach' des array.
• 4) Tu commence par filtrer ton array avec 'filter' en... :
  • 4.1) ...réinitialisant la propriété css 'display' de de toute tes 'options' ('x.style.display = null') et en renvoyant l'inverse du résultat de cette association (le résultat étant 'null'), c'est à dire 'true'.
  • 4.2) ...vérifiant également que les 4 premier caractères de chaque option ne correspondent pas aux valeur '2100' et '2101' grâce à un array contenant ces deux valeurs et la méthode 'some' qui renvoi 'true' ou 'false'.
• 5) Pour chaque options filtrées grâce à 'filter' qui respectent ces conditions et grâce à la méthode 'forEach' de ton nouvelle array (parce que 'filter' renvoi un nouvelle array), tu assigne la valeur 'none' aux propriétés CSS 'display'.

Et tout ça en une seule ligne, rien que pour la frime .

C'est ce genre de chose que tu attendais ?

-
Edité par BrainError 6 août 2020 à 16:31:03

Bonjour , 

Je tiens tout d'abord a vous remercier pour votre aide que vous m'accorder 

Au sujet de votre code , j'aimerais savoir comment est-ce que je pourrais placer cela dans mon code actuel car je ne sais pas vraiment comment l'adapter au mien (c'est une question très bête)

Merci D'avance

Ben tout ce dont tu as besoin, c'est de modifier l'id ('__ID__') de sorte à ce qu'il correspondent à celui de ton 'select', et éventuellement les valeurs à filtrées contenues dans le second array ('2100' et '2101') si tu veux les changer.

Après, tu as juste à ajouter cette ligne là où tu en as besoin et elle fera tout le travail.

Oui justement ma problématique concerne plutôt l'emplacement de cet ligne sur le code 

Je suis désolé de vous embêtez mais pour le coup je vous avouerai que je ne sais pas quoi retirer dans le code initial

Ben, cette ligne est auto-suffisante, elle remplace la totalité de ton bout de code.

Lorsque je tente d'effectuer un test sur la console avec ce bout de code , voici le message d'erreur : Uncaught TypeError: Cannot read property 'filter' of undefined

-
Edité par bilou93200 6 août 2020 à 20:34:40

Bonjour.

la proposition de BrainErro est excellente et très savante. Si tu veux quelque chose de plus classique (à part la fonction includes qui est de l'ECMA 6) tu peux aussi faire quelque chose comme suit :

form name=formu>
    <select name=liste>
	<option>2000
	<option>2001
	<option>2002
	<option>2003
	<option>2004
<script>
let accept = ['2001','2002','2004'];
let opts = formu.liste.options;
let inner = '';
for(let i=0, maxi = opts.length; i < maxi ; i++) {
    if( ! accept.includes(opts[i].text))
	 opts[i].style.display='none';
}

Cordialement

-
Edité par Domi65 6 août 2020 à 18:20:02

Bonjour Domi95 , 

Effectivement , la solution de BrainErro est excellente et la votre également car elles fonctionnent !!

Cependant , serait-il possible de m'expliquer comment fonctionne le votre s'il vous plait afin que je sache de quel manière m'y prendre à l'avenir

Eh bien par la fonction includes, appliquée à ma liste d'acceptation, je vérifie que le texte (mais ça aurait pu être la value) de chaque option fait partie de cette liste (tableau accept). Si ça n'en fait pas partie je la cache.

Je fais ça dans une boucle pour qu'elle soient toutes vérifiées, bien sûr.

P.S. : la ligne let inner = '' ne sert à rien ! c'est un oubli.

Merci pour toutes ces informations

J'ai donc tester le code suivant : 

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 parfaitement, mais seulement à partir de la console , et pour ce faire je suis oblige d'ouvrir la liste déroulante pour qu'elle se charge 

Mon objectif serait que cela se fasse automatiquement des le chargement de la page , comment pourrais-je faire ?

Merci Beaucoup pour votre retour

Salut,

Tu ajoutes un attribut 'defer' a ta balise 'script' qui appelle ton code.

Ça indiqué au navigateur d'attendre que le DOM soit chargé avant de lancer ton script (ce qui est probablement la cause de ton problème...)

Bonjour BrainError, 

Ceci est effectivement une très bonne idée cependant je rencontre un probleme à ce propos car je dispose que de deux fichier pour mon plugin :

Le JS ci-dessus ainsi que le fichier manifest json qui comprend des informations lié au plugin

Je me pose la question qui de savoir de quel manière pourrais-je ajouter l'attribut "defer" dans la balise script étant donne que je n'ai pas de fichier HTML

Dans ce genre de cas, tu utilise un événement 'DOMContentLoaded' qui fait exactement la même chose :

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

Je te remercie énormément pour cet aide BrainError , je me suis donc permis d'insérer ce bout de code au script 

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 ?

Bien Cordialement,

Salut,

Commence par tester que le gestionnaire d'événement 'DOMContentLoaded' est bien lancé avec un 'console.log("test123");' par exemple.

Si ta console reçoit bien le message 'test123', c'est que le problème vient du code que tu utilises dans ce gestionnaire.

Dans ce cas, commence par vérifier que ta variable 'liste' n'est pas vide toujours à l'aide de 'console.log'.

A quoi sert ta variable 'inner' ?

Bonjour , 

Effectivement , je pense fortement que cela provient du code, car la console reçoit bien le message 'test123'

Ma variable 'inner' n'a pas vraiment d'utilité je l'ai retiré

Si je peux me permettre , je pense que le fait d'utiliser 'MutationObserver' pourrait éventuellement résoudre mon problème 

Cependant je ne sais pas vraiment comment l'utiliser

Salut,

'MutationObserver' c'est un peu sortir de le bazooka.

J'ai trouvé ça sur le net : https://stackoverflow.com/questions/5082094/register-domcontentloaded-in-google-chrome

Essais ce qui est suggéré en réponse acceptée, càd '"run_at":"document_start"' dans ton manifest pour s'assurer de déclencher l'événement 'DOMContentLoaded'.

-
Edité par BrainError 9 décembre 2020 à 16:54:17

Bonjour , 

Je viens tout juste de modifier le manifest.json en mettant "run_at": "document_start" et lorsque j'actualise la page contenant la liste déroulante il me met un message d'erreur qui est le suivant dans la console :

Uncaught TypeError: Cannot read property 'childNodes' of null

J'ai l'impression qu'il n'arrive pas à charger cette liste déroulante et donc pour lui celle-ci est vide