Chained Selects Plugin

**eilarod** · 01/10/2015, 14h29

Bonjour,
J'utilise ce plugin :
http://www.appelsiini.net/projects/chained

Mon probleme :

Le premier selecteur multiple fonctionne mais le second selecteur multiple ne fonctionne pas. Quand je supprime le premier selecteur multiple le second fonctionne.
En sachant que les 2 selecteurs multiples A0 et B0 ne sont pas liés ensembles, et n'ont rien avoir ensemble !
Auriez vous une solution pour que les 2 fonctionnent ? Et j'en ai un paquet a mettre en place, quel est la solution pour qu'il n'y ai pas de conflit entre eux ?

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<select id="A0">
    <option value="A1">A1</option>
    <option value="A2">A2</option>
    <option value="A3">A2</option>
</select>
 
<select id="A0-1">
    <option value="A0-A1" class="A1">A0-A1</option>
    <option value="A0-A2" class="A1">A0-A2</option>
    <option value="A0-A3" class="A1">A0-A3</option>
 
    <option value="A0-B1" class="A2">A0-B1</option>
    <option value="A0-B2" class="A2">A0-B2</option>
    <option value="A0-B3" class="A2">A0-B3</option>
 
    <option value="A0-C1" class="A3">A0-C1</option>
    <option value="A0-C2" class="A3">A0-C2</option>
    <option value="A0-C3" class="A3">A0-C3</option>
</select>
 
 
<script type="text/javascript" charset="utf-8">
$(function()
    { 
        $("#A0-1").chained("#A0");
    });
</script>
 
<select id="B0">
    <option value="B1">A1</option>
    <option value="B2">A2</option>
    <option value="B3">A2</option>
</select>
 
<select id="B0-1">
    <option value="B0-A1" class="B1">B0-A1</option>
    <option value="B0-A2" class="B1">B0-A2</option>
    <option value="B0-A3" class="B1">B0-A3</option>
 
    <option value="B0-B1" class="B2">B0-B1</option>
    <option value="b0-B2" class="B2">B0-B2</option>
    <option value="B0-B3" class="B2">B0-B3</option>
 
    <option value="B0-C1" class="B3">B0-C1</option>
    <option value="B0-C2" class="B3">B0-C2</option>
    <option value="B0-C3" class="B3">B0-C3</option>
</select>
 
<script type="text/javascript" charset="utf-8">
$(function()
    { 
        $("#B0-1").chained("#B0");
    });
 
</script>

En vous remerciant

**danielhagnoul** · 02/10/2015, 02h13

Le plugin joue sur les "value" et les "class" pour faire le lien entre le select parent et le select enfant, il est donc impossible de comprendre votre problème sans les codes HTML.

L'exemple fonctionne très bien. Mon code de test :

Code :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css">
  <style>
 
  </style>
</head>
<body>
 
  <select id="mark" name="mark">
    <option value="">--</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </select>
 
  <select id="series" name="series">
    <option value="">--</option>
    <option value="series-3" class="bmw">3 series</option>
    <option value="series-5" class="bmw">5 series</option>
    <option value="series-6" class="bmw">6 series</option>
    <option value="a3" class="audi">A3</option>
    <option value="a4" class="audi">A4</option>
    <option value="a5" class="audi">A5</option>
  </select>
 
  <select id="model" name="model">
    <option value="">--</option>
    <option value="coupe" class="series-3 series-6 a5">Coupe</option>
    <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
    <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
    <option value="sportback" class="a3 a5">Sportback</option>
  </select>
 
  <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>/*! Chained 1.0.0 - MIT license - Copyright 2010-2014 Mika Tuupola */
!function(a,b){"use strict";a.fn.chained=function(c){return this.each(function(){function d(){var d=!0,g=a("option:selected",e).val();a(e).html(f.html());var h="";a(c).each(function(){var c=a("option:selected",this).val();c&&(h.length>0&&(h+=b.Zepto?"\\\\":"\\"),h+=c)});var i;i=a.isArray(c)?a(c[0]).first():a(c).first();var j=a("option:selected",i).val();a("option",e).each(function(){a(this).hasClass(h)&&a(this).val()===g?(a(this).prop("selected",!0),d=!1):a(this).hasClass(h)||a(this).hasClass(j)||""===a(this).val()||a(this).remove()}),1===a("option",e).size()&&""===a(e).val()?a(e).prop("disabled",!0):a(e).prop("disabled",!1),d&&a(e).trigger("change")}var e=this,f=a(e).clone();a(c).each(function(){a(this).bind("change",function(){d()}),a("option:selected",this).length||a("option",this).first().attr("selected","selected"),d()})})},a.fn.chainedTo=a.fn.chained,a.fn.chained.defaults={}}(window.jQuery||window.Zepto,window,document);
</script>
  <script type="module">
 
    $( "#series" ).chainedTo( "#mark" );
    $( "#model" ).chainedTo( "#series" );
 
  </script>
</body>
</html>

**eilarod** · 02/10/2015, 11h01

Merci pour votre réponse. Moi aussi il fonctionne très bien, cependant lorsque je veux répéter l'opération avec d'autre select différent les autres ne fonctionnent pas.
J'ai modifié mon post, effectivement cela ne semblait pas expliquer le vrai problème après avoir lu votre réponse.
Donc j'ai mis le code html.

Finalement en testant votre code (différent du mien) cela fonctionne parfaitement.

Je vous remercie encore.

**eilarod** · 09/10/2015, 00h05

Bonjour,

Cela fonctionne parfaitement sous chrome et firefox, mais pas sous IE, comment savoir ce qu'il faut adapter pour IE ?

**danielhagnoul** · 09/10/2015, 09h59

Pour le fonctionnement des outils exposés dans le musée de l'informatique, il faut consulter les archéoinformaticiens.

Même Microsoft n'assure plus le support d'IE, à l'exception IE11, mais on se doute que c'est temporaire et qu'il se débarrassera du bébé avec l'eau du bain aussi vite qu'il sera possible.

L'auteur du plugin ne dit rien sur le sujet.

L'auteur de ce message ne travaille plus qu'avec les dernières versions de Chrome et Edge.

C'est un cas désespéré, il va vraiment falloir trouver un archéoinformaticien.

Mais même lui aura besoin d'un peu plus de renseignements, quelle version de l'archéochose est en cause et quelles sont les erreurs affichées dans la console (touche F12).

**eilarod** · 10/10/2015, 00h52

D'après la console c'est cette ligne qui n'est pas pris en charge :

Code :

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

elem.setAttribute( name, value + "" );

Plus complet :

Code :

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
if ( value !== undefined ) {
 
			if ( value === null ) {
				jQuery.removeAttr( elem, name );
 
			} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
				return ret;
 
			} else {
				elem.setAttribute( name, value + "" );
				return value;
			}
 
		} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
			return ret;
 
		} else {
			ret = jQuery.find.attr( elem, name );
 
			// Non-existent attributes return null, we normalize to undefined
			return ret == null ?
				undefined :
				ret;
		}

C'est déja une piste ! Je vais essayé de chercher.