Chained Selects Plugin

Version imprimable

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:

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

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:

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>

02/10/2015, 11h01
eilarod

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.
09/10/2015, 00h05
eilarod

Bonjour,

Cela fonctionne parfaitement sous chrome et firefox, mais pas sous IE, comment savoir ce qu'il faut adapter pour IE ?
09/10/2015, 09h59
danielhagnoul

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

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

Code:

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

Plus complet :

Code:

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.

10/10/2015, 09h05
NoSmoking

Bonjour,
en dehors de tout contexte il va être difficile de t'aider, que valent name, value, de quel type sont-ils etc...
10/10/2015, 10h09
danielhagnoul

Et si l'on utilisait jQuery : $( elem ).attr( name, value + "" );.