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