Créer des SELECT liés

Version imprimable

Bonjour,
Je viens d'adapter le code exploré dans le tuto #lier-select-313
Je ne comprends pas mon erreur et mes connaissances en javascript et jQuery sont assez limitées :

Le premier fichier "test_select_type_materiel.php" :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
    <body>
    	<?php
                require "db.class.php";
                $DB = new DB();
                $types = $DB->query('SELECT * FROM type_vehicule');
                $sous_types = $DB->query('SELECT * FROM sous_type_vehicule');
                $sousTypeByType = array();
                foreach( $sous_types as $sous_type) {
                        $sousTypeByType[$sous_type->ID_TYPE_VEHICULE][$sous_type->ID] = $sous_type->NOM_SOUS_TYPE;
                }
                
                $type_id = 0;
                if(isset($_POST['type_vehicule'])){
                        $type_id = $_POST['type_vehicule'];
                }
                
                var_dump($sousTypeByType);
        ?>
		<div class="navbar navbar-fixed-top">
		  <div class="navbar-inner">
		    <div class="container">
		      	<a class="brand" href="#">
				  Select
				</a>
		    </div>
		  </div>
		</div>
 
		<form method="post" action="#">
 
		<div class="container" style="margin-top:60px">
 
			<div class="row">
				<div class="span3">
					<div class="control-group">
						<label class="control-label" for="select01">Type de véhicule : </label>
						<div class="controls">
			 				<select id="type_vehicule" name="type_vehicule" size="25" data-target="id_type" data-url="sous_type.php" class="ajaxList">
			 					<?php foreach ( $types as $type ): ?>
			 						<option value="<?= $type->ID; ?>"<?= $type_id == $type->ID ? ' selected' : ''; ?>>
			 							<?= $type->TYPE_VEHICULE; ?>
			 						</option>
			 					<?php endforeach ?>
			              	</select>
			            </div>
		          	</div>
				</div>
				<div class="span3">
					<div class="control-group">
						<label class="control-label" for="select01">Sous-Type</label>
						<div class="controls">
			 				<select id="sous_type" name="sous_type" size="25" class="ajaxList" data-url="option_type.php" data-target="option_type">
			 					<option value="0">Vous devez sélectionner un sous-type de matériel</option>
			              	</select>
			            </div>
		          	</div>
				</div>
				<div class="span3">
					<div class="control-group">
						<label class="control-label" for="select01">Information Complémentaire</label>
						<div class="controls">
			 				<select id="option_type" name="option_type" size="25">
			 					<option value="0">Vous devez sélectionner une information complméentaire</option>
			              	</select>
			            </div>
		          	</div>
				</div>
			</div>
 
	       <input type="submit" value="Envoyer">
 
	       <?= var_dump($_POST); ?>
 
	</div>
 
	</form>

Le second fichier "sous_type.php" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
require 'db.class.php';
if(isset($_GET['id'])){
        $db = new DB();
        $sousType = $db->query('SELECT * FROM `sous_type_vehicule` WHERE ID_TYPE_VEHICULE=:type_vehicule',array('type_vehicule' => $_GET['id']));
        if(empty($sousType)){
                $return = array('error' => "Il n'existe pas de sous-type pour ce type de matériel sélectionnée");
        }else{
                $return = array(
                        'error' => false,
                        'results' => $sousType
                );
        }
 
}else{
        $return = array('error' => "Vous n'avez pas sélectionné le type de matériel");
}
 
die(json_encode($return));
?>

Le fichier app.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	$('.ajaxList').change(function(event){
		var select = $(this);
		var id = '#'+select.data('target');
		$.get(select.data('url'), {id:select.val()}, function(data){
			if(data.error){
				alert(data.error);
			}else{
				$(id).parents('.control-group').show();
				var target = $(id).get(0);
				target.options.length = 0;
				for(var i in data.results){
					var result = data.results[i];
					target.options[i] = new Option(result.name, result.id, false, false);
				}
			}
		},'json');
	}).each(function(){
		var select = $(this);
		var target = $('#'+select.data('target'));
		target.parents('.control-group').hide();
	});
 
})(jQuery);

Voici la Bdd:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
--
-- Structure de la table `type_vehicule`
--
 
CREATE TABLE `type_vehicule` (
  `ID` int(11) NOT NULL,
  `CODE_TYPE` int(11) NOT NULL,
  `TYPE_VEHICULE` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
 
--
-- Structure de la table `sous_type_vehicule`
--
CREATE TABLE `sous_type_vehicule` (
  `ID` int(11) NOT NULL,
  `ID_TYPE_VEHICULE` int(11) NOT NULL,
  `NOM_SOUS_TYPE` varchar(255) CHARACTER SET utf8 NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Déchargement des données de la table `type_vehicule`
--
 
INSERT INTO `type_vehicule` (`ID`, `CODE_TYPE`, `TYPE_VEHICULE`) VALUES
(1, 1, 'BERLINE'),
(2, 2, 'FGTTE'),
(3, 3, 'FGON'),
(4, 4, 'P.L.'),
(5, 4, 'BUS'),
(6, 5, 'SPECIAL'),
(7, 6, 'SCOOTER'),
(8, 6, 'VELO'),
(9, 7, 'TONDEUSE'),
(10, 8, 'DIVERS'),
(11, 8, 'HORS PARC');
--
-- Déchargement des données de la table `sous_type_vehicule`
--
 
INSERT INTO `sous_type_vehicule` (`ID`, `ID_TYPE_VEHICULE`, `NOM_SOUS_TYPE`) VALUES
(1, 1, 'VP - PETITE CITADINE - CATEGORIE  M1'),
(2, 1, 'VP - CITADINE - CATEGORIE  M1'),
(3, 1, 'VP - LUDOSPACE - CATEGORIE M1'),
(4, 1, 'VP - ROUTIERE - CATEGORIE M1'),
(5, 1, 'VP - BREACK - CATEGORIE M1'),
(6, 1, 'VP - MONOSPACE - CATEGORIE M1'),
(7, 1, 'VP - SUV - CATEGORIE M1'),
(10, 2, 'VUL - UTILITAIRE FOURGONNETTE TOLEE - CATEGORIE  N1'),
(11, 2, 'VUL - UTILITAIRE BENNE - CATEGORIE  N1'),
(12, 2, 'VUL - UTILITAIRE GROUPE FROID - CATEGORIE  N1'),
(13, 2, 'VUL - UTILITAIRE PLATEAU - CATEGORIE N1'),
(15, 3, 'VU - UTILITAIRE FOURGON TOLE - CATEGORIE  N1'),
(16, 3, 'VU - UTILITAIRE CAISSE HAYON - CATEGORIE  N1'),
(17, 3, 'VU - UTILITAIRE BENNE SIMPLE - CATEGORIE  N1'),
(18, 3, 'VU - UTILITAIRE BENNE ET GRUE - CATEGORIE  N1'),
(19, 3, 'VU - UTILITAIRE FRIGORIFIQUE - CATEGORIE  N1'),
(20, 3, 'VU - UTILITAIRE PLATEAU - CATEGORIE N1'),
(22, 4, 'CAMION - CITERNE MOINS DE 12T - CATEGORIE  N2'),
(23, 4, 'CAMION - BENNE SIMPLE MOINS DE 12T - CATEGORIE  N2'),
(24, 4, 'CAMION - BENNE ET GRUE MOINS DE 12T - CATEGORIE  N2'),
(25, 4, 'CAMION - PORTE CHAR MOINS DE 12T - CATEGORIE  N2'),
(26, 4, 'CAMION - PLATEAU MOINS DE 12T - CATEGORIE  N2'),
(27, 4, 'CAMION - GROUPE FROID MOINS DE 12 T - CATEGORIE  N2'),
(28, 4, 'CAMION - FOURGON MOINS DE 12 T - CATEGORIE  N2'),
(29, 4, 'CAMION - BETAILLERE MOINS DE 12 T'),
(30, 4, 'CAMION - CITERNE PLUS DE 12T - CATEGORIE  N3'),
(31, 4, 'CAMION - BENNE SIMPLE PLUS DE 12T - CATEGORIE  N3'),
(32, 4, 'CAMION - BENNE ET GRUE PLUS DE 12T - CATEGORIE  N3'),
(33, 4, 'CAMION - PORTE CHAR PLUS DE 12T - CATEGORIE  N3'),
(34, 4, 'CAMION - PLATEAU PLUS DE 12T - CATEGORIE  N3'),
(35, 4, 'CAMION - GROUPE FROID PLUS DE 12 T - CATEGORIE  N3'),
(36, 4, 'CAMION - FOURGON PLUS DE 12 T - CATEGORIE  N3'),
(37, 4, 'CAMION - BETAILLERE PLUS DE 12 T'),
(38, 4, 'CAMION - PORTE GRUMES PLUS DE 12T - CATEGORIE N3'),
(39, 4, 'CAMION - GRUE PLUS DE 12 T - CATEGORIE N3'),
(41, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE I - MOINS DE 5T - CATEGORIE M2'),
(42, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE II - MOINS DE 5T - CATEGORIE M2'),
(43, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE III - MOINS DE 5T - CATEGORIE M2'),
(45, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE I - PLUS DE 5T - CATEGORIE M3'),
(46, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE II - PLUS DE 5T - CATEGORIE M3'),
(47, 5, 'BUS - CAPACITE SUPERIEURE A 22 PASSAGERS CLASSE III - PLUS DE 5T - CATEGORIE M3'),
(49, 5, 'BUS - CAPACITE INFERIEURE A 22 PASSAGERS CLASSE A - MOINS DE 5T - CATEGORIE M2'),
(50, 5, 'BUS - CAPACITE INFERIEURE A 22 PASSAGERS CLASSE B - MOINS DE 5T - CATEGORIE M2'),
(52, 5, 'BUS - CAPACITE INFERIEURE A 22 PASSAGERS CLASSE A - PLUS DE 5T - CATEGORIE M3'),
(53, 5, 'BUS - CAPACITE INFERIEURE A 22 PASSAGERS CLASSE B - PLUS DE 5T - CATEGORIE M3'),
(55, 6, 'TRACTEUR'),
(56, 6, 'REMORQUE'),
(57, 6, 'ENTRETIEN ESPACES PUBLICS'),
(58, 6, 'ENGIN DE CHANTIER'),
(59, 6, 'TONDEUSE AUTOPORTEE'),
(61, 7, 'DEUX ROUES'),
(62, 7, 'TROIS ROUES'),
(64, 8, 'DEUX ROUES'),
(65, 8, 'TROIS ROUES'),
(67, 10, 'ENTRETIEN ESPACES VERTS'),
(68, 10, 'PETITS MATERIELS 2 TEMPS'),
(69, 10, 'DISPOSITIF AUTONOME'),
(70, 10, 'LEVAGE'),
(71, 10, 'ENTRETIEN ESPACES ROUTIERS'),
(72, 10, 'REMORQUE'),
(74, 11, 'EQUIPEMENT GARAGE'),
(75, 11, 'MATERIEL NON CODE'),
(76, 11, 'LEVAGE'),
(77, 11, 'MATERIEL MOBILE'),
(78, 11, 'PONT ELEVATEUR'),
(79, 11, 'REPORT FRAIS AFFECTES');

**Ce que je veux**

Comme le précise le tuto, avec pour exemple les régions et les départments, je souhaiterai lié le select "sous_type" avec le select "type_materiel".

**Ce que j'obtiens**

L'affichage des Types de véhicule est correct mais il ne se passe rien quant à la mise à jour de l'autre select "sous_type".
Lorsque j'extrait le fichier "sous_type.php?id=4", voici ce que j'obtiens Lorsque je contrôle la console :

Code:

{"error":false,"results":[{"ID":"10","ID_TYPE_VEHICULE":"2","NOM_SOUS_TYPE":"VUL - UTILITAIRE FOURGONNETTE TOLEE - CATEGORIE N1"},{"ID":"11","ID_TYPE_VEHICULE":"2","NOM_SOUS_TYPE":"VUL - UTILITAIRE BENNE - CATEGORIE N1"},{"ID":"12","ID_TYPE_VEHICULE":"2","NOM_SOUS_TYPE":"VUL - UTILITAIRE GROUPE FROID - CATEGORIE N1"},{"ID":"13","ID_TYPE_VEHICULE":"2","NOM_SOUS_TYPE":"VUL - UTILITAIRE PLATEAU - CATEGORIE N1"}]}

et sur la console :

Code:

1
2
3
4
5
6
app.js:35 Uncaught TypeError: Cannot read property 'options' of undefined
    at Object.success (app.js:35)
    at o (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at w (jquery.min.js:4)
    at XMLHttpRequest.d (jquery.min.js:4)

Auriez vous une solution ? Je travail sur ce sujet depuis 4 heures sans trouver l'erreur.

Je ne suis pas rentré dans el détail du code, mais je vois

Citation:

'options' of undefined

que je relie à cette partie de ton code:
Code:

1 2 3 4 5 6 var target = $(id).get(0); target.options.length = 0; for(var i in data.results){ var result = data.results[i]; target.options[i] = new Option(result.name, result.id, false, false); }
et donc à ce pointeur:

Code:

var target = $(id).get(0);

Que vaut id à cet endroit de ton code ?
est tu sur d'avoir un element sur la page avec cet id ?

Tu peux le vérifier en faisant

Code:

console.log(id)

avant d'en invoquer la propriété options...

Autres solutions

Je te remercie #SpaceFrog.
Je me suis remis sur une solution plus simple que j'avais utilisée dans un projet précédent :

Le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<label for 'type'>Type : </label>
<select name='type_vehicule' id='type_vehicule' class='popup' onchange="fetch_select(this.value);" >
	<option value=''>Sélectionnez...</option>
	<?php
                $reponse4 = $bdd->query("SELECT * FROM `type_vehicule`");
                while ($donnees4 = $reponse4->fetch()){?>
			<option value='<?php echo $donnees4['ID'];?>'><?php echo $donnees4['TYPE_VEHICULE'];?></option>
		<?php
                }
                
                $reponse4->closeCursor();
        ?>
</select><br />
 
<label for 'sousType'>Sous-Type : </label>
<select name="sousType" id="sousType" class='popup' onchange="fetch_select_detail(this.value);">
	<option value=''>Sélectionnez...</option>
</select><br />
 
<label for 'infoComplementaire'>Information Complémentaire : </label>
<select name="infoComplementaire" id="infoComplementaire"></select><br />

La partie Javascript :

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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
        function fetch_select(val) {
                $.ajax({
                        type: 'POST',
                        url: 'data_type_vehicule.php',
                        data: {
                                get_option: val
                        },
                        success: function(response) {
                                $('#sousType').html(response);
                        }
                })
        }
        
        function fetch_select_detail(val) {
                $.ajax({
                        type: 'POST',
                        url: 'data_detail_vehicule.php',
                        data: {
                                get_option_detail: val
                        },
                        success: function(response) {
                                $('#infoComplementaire').html(response);
                        }
                })
        }
</script>

Les deux fichiers :
data_type_vehicule.php :

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
<?php
 
    $requeteTabSousTypeVehicule = $bdd->query("SELECT `ID` AS idSousType, `NOM_SOUS_TYPE` AS nomSousType
    	FROM `sous_type_vehicule`
    	WHERE ID_TYPE_VEHICULE='".$_POST['get_option']."'
    	ORDER BY NOM_SOUS_TYPE"
    );
 
 
    $res[] ="<option value=''>Sélectionnez...</option>";
 
 
    if (!empty($_POST['get_option'])) {
 
        while ($listSousTypeExtrait = $requeteTabSousTypeVehicule->fetch()){
            if ($_POST['get_post_original']==$listSousTypeExtrait['idSousType']){$selected="selected";}else{$selected="";}
 
           $res[] = '<option value="'.$listSousTypeExtrait['idSousType'].'" '.$selected.'  >'.$listSousTypeExtrait['nomSousType'].'</option>';
 
 
        }
 
        $requeteTabSousTypeVehicule->closeCursor();
 
        echo implode(PHP_EOL, $res);
        exit;
    }
    else{
 
        echo "Erreur !!!";
    }
?>

data_detail_vehicule.php

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
<?php
 
    $requeteCountDetailVehicule = $bdd->query("SELECT COUNT(`ID`) AS nbrOption
    	FROM `detail_sous_type`
    	WHERE ID_SOUS_TYPE='".$_POST['get_option_detail']."'"
    );
    $countDetailVehiculeExtrait = $requeteCountDetailVehicule->fetch();
    $requeteCountDetailVehicule->closeCursor();
 
    if ($countDetailVehiculeExtrait['nbrOption']>0){
 
        $requeteTabDetailVehicule = $bdd->query("SELECT `ID` AS idDetail, `DETAIL_SOUS_TYPE` AS nomDetailVehicule
        	FROM `detail_sous_type`
        	WHERE ID_SOUS_TYPE='".$_POST['get_option_detail']."'"
        );
 
 
        $res[] ="<option value=''>Sélectionnez...</option>";
 
 
        if (!empty($_POST['get_option_detail'])) {
 
            while ($listDetailVehiculeExtrait = $requeteTabDetailVehicule->fetch()){
                if (!empty($listDetailVehiculeExtrait['nomDetailVehicule'])){
                    if ($_POST['get_post_original']==$listDetailVehiculeExtrait['idDetail']){$selected="selected";}else{$selected="";}
                    $res[] = '<option value="'.$listDetailVehiculeExtrait['idDetail'].'" '.$selected.' >'.$listDetailVehiculeExtrait['nomDetailVehicule'].'</option>';
                }
                else{
                    $res[] ="<option value=''>Pas de détail disponible</option>";
                }
            }
 
            $requeteTabDetailVehicule->closeCursor();
 
            echo implode(PHP_EOL, $res);
            exit;
        }
        else{
 
            $res[] ="<option value=''>Pas de détail disponible</option>";
        }
    }
    else{
        $res[] ="<option value=''>Pas de détail disponible</option>";
    }
?>

J'ai passé des heures à rechercher la solution. Je manque de connaissance en javascript pour le résoudre. Je ne mets pas le sujet en "Résolu" pour le moment car je ne désespère pas qu'un développeur trouve la solution !!!

Merci encore #SpaceFrog pour le coup de main.

08/05/2021, 11h30
NoSmoking

Bonjour,
ton :

Citation:

app.js:35 Uncaught TypeError: Cannot read property 'options' of undefined

signifie simplement que ton <select> n'existe pas.

A la lecture de ton code HTML on peut voir

Code:

<select id="type_vehicule" name="type_vehicule" size="25" data-target="id_type" data-url="sous_type.php" class="ajaxList">

et plus loin :

Code:

<select id="sous_type" name="sous_type" size="25" class="ajaxList" data-url="option_type.php" data-target="option_type">

on trouve donc id="sous_type" mais pas d'élément cible, data-target="id_type" !