Exécuter un onchange depuis un appel jquery / dropdown liées

**laloune** · 16/09/2014, 22h05

Bonjour à tous,

je ne savais pas trop quoi mettre comme titre, peut-être celui-ci est-il saugrenu ou vide de sens dans ce cas n'hésitez pas à me le dire.

J'ai le code suivant:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Jedox multi-selector - Proof of concept</title>
 
  <!-- Libraries -->
  <script src="../jquery/jquery.js" type="text/javascript"></script>
  <script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
  <script src="../jquery/jquery.cookie.js" type="text/javascript"></script>
 
  <!-- CSS -->
  <link href="style.css" rel="stylesheet" type="text/css">
 
  <script type="text/javascript">

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
57
58
59
60
61
62
63
64
65
66
   $(document).ready(function() {
    var $regions = $('#regions');
    var $departements = $('#departements');
    var $villes = $('#villes');
 
    $.ajax({
        url: 'treatment.php',
        data: 'go', 
        dataType: 'json', 
        success: function(json) {
            $.each(json, function(index, value) {
 
                $regions.append('<option value="'+ index +'">'+ value +'</option>');
 
            });
        }
    });
 
 
    $regions.on('change', function() {
        var val = $(this).val(); 
 
        if(val != '') {
            $departements.empty(); 
 
            $.ajax({
                url: 'treatment.php',
                data: 'id_region='+ val, 
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
			$departements.append('<option value="'+ index +'">'+ value +'</option>');                        			
                    });
 
                }
            });
            $('#departements option:eq(0)').prop('selected', true);
        }
    });
 
 
    $departements.on('change', function() {
        var val = $(this).val(); 
 
        if(val != '') {
            $villes.empty();
 
            $.ajax({
                url: 'treatment.php',
                data: 'id_dept='+ val, 
                dataType: 'json',
                success: function(json) {
 
                    $.each(json, function(index, value) {
			console.log(index);
                        $villes.append('<option value="'+ index +'">'+ value +'</option>');                        
                    });
 
                }
            });
            $('#villes option:eq(0)').prop('selected', true);
        }
    });
 
 
});

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
  </script>
</head>
 
  <body>	
	<select id="regions" name="regions">
	<option value="">-- Régions --</option>
	</select>
 
	<select id="departements" name="departements">
	    <option value="">-- Départements--</option>
	</select>
	<select id="villes" name="villes">
	    <option value="">-- Villes--</option>
	</select>	
  </body>
</html>

et le php qui va avec:

Code php :

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
<?php
if(isset($_GET['go']) || isset($_GET['id_region']) || isset($_GET['id_dept'])) {
 
    $json = array();
 
    if(isset($_GET['go'])) {
       $json['32']='Lorraine';
       $json['34']='Midi';
    } else if(isset($_GET['id_region'])) {
       $arrDepts=array(
		    '32'=>array(
			      '55'=>'Meuse',
			      '54'=>'Meurthe-et-Moselle'
			      ),
		    '34'=>array(
			      '31'=>'Haute-Garonne',
			      '32'=>'Gers'
			      )
		      );
       $json=$arrDepts[$_GET['id_region']];
    }
    else if (isset($_GET['id_dept']))
    {
       $arrVilles=array(
		    '55'=>array(
			      '551'=>'Bar le Duc',
			      '552'=>'Verdun'
			      ),
		    '54'=>array(
			      '541'=>'Nancy',
			      '542'=>'PAM'
			      ),			      
		    '31'=>array(
			      '311'=>'Toulouse',
			      '312'=>'Castres'
			      )
		      );
	$json=$arrVilles[$_GET['id_dept']];
    }
 
 
    //echo $_GET['id_dept'];
     //print_r($json);
    // envoi du résultat au success
    echo json_encode($json);
}
?>

ceci fonctionne bien mais ce que je veux faire (c'est le but des lignes 59 et 83), c'est que lors de l'initialisation il exécute les évenements onchange comme si c'était l'utilisateur qui avait changé de combobox. Je m'explique:

1. au début j'ai --- Régions --- / --- Départements --- / --- Villes ---
2. lorsque je choisis "Lorraine", je souhaiterais que dans "Départements" arrive directement le premier, à savoir Meurthe-et-Moselle, mais aussi dans "villes" la première option, à savoir "Nancy"

Est-ce possible ? Avec le code ci-dessus il me sélectionne la première valeur de Départements, mais pas de Villes :-(

Une idée? D'avance merci !