Discussion :

[Invité]

Bonjour,

je vous explique mon problème:

j'ai deux listes déroulantes liées, la première représente un "type" (14 éléménts)
et la deuxième comprend des "detail" (91 éléments) de ces différents "type".

Lorsque je sélectionne un "type" dans la première j'essai de n'afficher que les"detail" correspondant.
Le nombre de "detail" par "type" est variable.

Cela fonctionne bien avec les 4 premiers "type", mais pas avec le reste.
Je ne vois pas mon erreur et j'ai l’impression qu'il y'a trop d’éléments dans la liste détails pour que mon Jquery fonctionne correctement.

Voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<select name="type" id="type" >
	<option value="0" selected="selected">None</option>
	<option value="01">Type A</option>
	<option value="02">Type B</option>
	<option value="03">Type C </option>
...
	<option value="14">Type N </option>
</select>
 
 
<select name="detail" id="detail" >
	<option value="0" >None</option>
 
	<option value="010100" >Detail A.1</option>
	<option value="010200" >Detail A.2</option>
	<option value="010300" >Detail A.3</option>
	<option value="010400" >Detail A.4</option>
 
	<option value="020100" >Detail B.1</option>
	<option value="020200" >Detail B.2</option>
	<option value="020300" >Detail B.3</option>
 
	<option value="030100" >Detail C.1</option>
	<option value="030200" >Detail C.2</option>
	<option value="030300" >Detail C.3</option>
	<option value="030400" >Detail C.4</option>
	<option value="030400" >Detail C.5</option>
...
	<option value="140700" >Detail N.8</option>
</select>

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function() {
 
    var $index = $('#type');
    var $detail = $('#detail');
 
    // A la sélection d une nouvelle catégorie dans la liste
    $index.on('change', function() {
       var val = $(this).val();
 
       // Cacher ltout les éléments de la liste
       $detail.children().hide();   
 
       if ( val != 0)
       {
    	   $detail.prop('disabled', false);
 
   	   // Selection du premier élément de la liste
    	   $detail.val(val+"0100");
 
   	   // Affichage de la liste détaillé commencent par l'index de la catégorie sélectionné
   	   $detail.children("option[value^=" + val + "]").show();
       }
       else 
       {
    	   $detail.children("option[value=0]").show();
    	   $detail.val(val);
    	   $detail.prop('disabled', true);
       }
    });
});

Auriez-vous une idée à me suggerer?
Une erreur que je ne vois pas?

Merci

[la.lune]

Voici la solution, bon j'ai fais le code à ma manière simple et concis en modifiant ton code, j'ai ajouté un bonus à la fin du code alors que tu n'a pas traité ce cas. Alors tout est commenté, et désolé car je n'ai pas chercher réellement à trouver où était l'erreur dans ton code

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    var $index  = $("#type");
    var $detail = $('#detail');
var resteEstChache=false;
    // A la sélection d une nouvelle catégorie dans la liste
    $index.on('change', function() {
       var aAfficher="option[value^='"+$(this).val()+"']";
        //Il faut ré-afficher ce qui sont déjà cachés dans une étape précédente avant de filtrer
       if(resteEstChache)$detail.children().show();
       // Cacher seulement les consernés et laisser ce qu'on veut
       $detail.children().not(aAfficher).hide();
       resteEstChache=true; 
        //Il faut rafraîchir directement l'option sélectionné apparente
        //par la première option de la liste encours(la liste filtré)
 $detail.find(":selected").text($detail.children().filter(aAfficher).first().text());
    });
});

Voir la démonstration