Afficher le prix total, incompréhension du code

**Hug0x5** · 11/05/2019, 21h26

Bonjour, j'essaye de comprendre le code de ce programme, mais je ne voit pas comment afficher le prix total, soit car je ne comprend pas soit simplement car ce n'est pas dans le code. Si quelqu'un pouvait m'aider à l'afficher..
Ce code vient du post suivant : https://www.developpez.net/forums/d9...ntites-select/

Cordialement.

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
        </style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
                $(function(){
                        $("[id^='entree']").change(function(){
                                var total = 0;
 
                                $("select[id^='entree']").each(function(i,item){
                                        total += parseFloat($(item).prev().text())*$(item).val();
                                });
 
                                $("#total").text(total.toFixed(2) + " €");
                        });
                });
        </script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>

**psychadelic** · 12/05/2019, 15h56

Faudrait d'abord que tu utilise la balise code, de l'interface de developpez ( le bouton avec le symbole #

sinon quelle est ta difficulté ?
le montant calculé est placé par cette instruction : $("#total").text(total.toFixed(2) + " €");pour le reste, c'est dans les doc :
Shorthand for $( document ).ready() => https://learn.jquery.com/using-jquer...ocument-ready/

function => https://developer.mozilla.org/fr/doc...saire/Fonction
parseFloat => https://developer.mozilla.org/fr/doc...aux/parseFloat
toFixed() => https://developer.mozilla.org/fr/doc...Number/toFixed

jQuery each => https://api.jquery.com/each/

jQuery WildCard ^ => http://api.jquery.com/attribute-starts-with-selector/

tous les jQuery WildCard => http://api.jquery.com/category/selectors/

jQuery .prev() => https://api.jquery.com/prev/

jQuery change() => https://api.jquery.com/change/

et, oui, les documentation ça existe et il faut les utiliser

sinon ce code est un peu bancal => il ne calcul pas le total lors du chargement de la page.
Il faudrait mieux :

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
    $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
      }
    });

**Hug0x5** · 12/05/2019, 18h07

Ce que je ne comprend pas, c'est comment afficher le montant total
Merci de la réponse

**psychadelic** · 12/05/2019, 19h22

le montant calculé est placé par cette instruction : $("#total").text(total.toFixed(2) + " €");

tiens, c'en est un que je n'avais pas référencé... jQuery text() => http://api.jquery.com/text/

**Hug0x5** · 12/05/2019, 19h34

Merci mais je ne voit pas trop comment le lier à la fonction total pour qu'elle soit affiché, je ne comprend pas vraiment

Comment dois-je mettre la fonction dans le 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
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
107
108
109
110
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
        </style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
                $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
      }
    });
</script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>

**psychadelic** · 12/05/2019, 20h54

bon, on va décomposer : $("#total").text(total.toFixed(2) + " €");la première chose à voir, c'est que sur cette ligne il y a plusieurs instructions "en même temps"

dans la partie HTML on a : <div id="total"></div>ce que l'on cherche à obtenir c'est d'avoir à cet emplacement HTML quelque chose ressemblant à <div id="total">0.60 €</div> ( par exemple).

pour avoir ce résultat d'exemple l'instruction jQuery serai : $("#total").text("0.60 €");mais comme ct"est un montant calculé contenu dans la variable total on devrai écrire $("#total").text(total);sauf que, toujours dans cet exemple total à pour valeur 0.6 et qu'on se retrouverai avec <div id="total">0.6</div>pour que 0.6 soit transformé en 0.60 € il faut 2 choses :
1- avoir 2 décimales après la virgule , c'est ce que fait total.toFixed(2) qui transforme 0.6 => 0.602- lui ajouter le symbole euro € (avec un espace devant.

en programmant de manière lourdingue on écrit:

Code :

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

1
2
3
4
5
 
var str_Total_2_decimales = total.toFixed(2);
var str_Total_Monnaie       = str_Total_2_decimales + " €";
 
$("#total").text(str_Total_Monnaie);

**Hug0x5** · 12/05/2019, 21h10

Comme tu peux le voir je suis vraiment une quiche en javascript

Mais en intégrant ton code au miens, je ne voit toujours pas d'affichage (sans doute car je l'ai mal fait)
J'essaye ce code pour essayer de l'intégrer par la suite au deuxième pour faire comme un panier.
Et toujours merci du temps que tu m'accorde.

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
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
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
        </style>
	<script charset="utf-8" src="../lib/jqueryui-1.8/js/jquery-1.4.2.min.js"></script>
	<script>
                $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
      }
    });
                {var str_Total_2_decimales = total.toFixed(2);
var str_Total_Monnaie       = str_Total_2_decimales + " €";
 
$("#total").text(str_Total_Monnaie);}
</script>
</head>
<body>
	<div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>  
</html>

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html> 
<meta charset="utf-8">
<html>
<link rel="stylesheet" type="text/css" href="config.css">
    <main class="entete">
        <section class="titre">
            <h1>BYT</h1>
        </section>
        <section class="menu">
                <ul id="navigation">
                    <li id="nav"><a href="index.html">Page d'accueil</a></li><!--
                    --><li id="nav"><a href="ordi.html">Nos Configurations</a></li><!--
                    --><li id="nav"><a href="mesure.html">Ordinateur sur mesure</a></li><!--
                    --><li id="nav"><a href="tech.html">Produits High-Tech</a></li><!--
                    --><li id="nav"><a href="contact.html">Nous contacter</a></li>
                </ul>
        </section>
    </main>
        <body>
            <ul id="marques" style="position: absolute; top: 195px; left: 20px;">
                 <li><a title="Marques"> Top marques</a></li>
                 <hr>
                 <li id="mar"><a href="https://www.acer.com/ac/fr/FR/content/home" onclick="window.open(this.href); return false;" title="Site d'Acer">Acer</a></li>
                 <li id="mar"><a href="https://www.amd.com/fr" onclick="window.open(this.href); return false;" title="Site d'AMD">AMD</a></li>
                 <li id="mar"><a href="https://www.asus.com/fr/" onclick="window.open(this.href); return false;" title="Site d'Asus">Asus</a></li>
                 <li id="mar"><a href="https://www.bequiet.com/fr" onclick="window.open(this.href); return false;" title="Site de Bequiet">Bequiet</a></li>
                 <li id="mar"><a href="https://www.corsair.com/fr/fr/" onclick="window.open(this.href); return false;" title="Site de Corsair">Corsair</a></li>
                 <li id="mar"><a href="https://www.gigabyte.com/fr" onclick="window.open(this.href); return false;" title="Site de Gigabyte">Gigabyte</a></li>
                 <li id="mar"><a href="https://www.intel.fr" onclick="window.open(this.href); return false;" title="Site d'Intel">Intel</a></li>
                 <li id="mar"><a href="https://www.microsoft.com/fr-fr" onclick="window.open(this.href); return false;" title="Site de Microsoft">Microsoft</a></li>
                 <li id="mar"><a href="https://fr.msi.com/" onclick="window.open(this.href); return false;" title="Site de MSI">MSI</a></li>
                 <li id="mar"><a href="https://www.nvidia.com/fr-fr/" onclick="window.open(this.href); return false;" title="Site d'Nvidia">Nvidia</a></li>
                 <li id="mar"><a href="http://www.coolermaster.com/" onclick="window.open(this.href); return false;" title="Site de CoolerMaster">CoolerMaster</a></li>
                 <li id="mar"><a href="https://www.samsung.com/fr/" onclick="window.open(this.href); return false;" title="Site de Samsung">Samsung</a></li>
                 <li id="mar"><a href="https://www.sandisk.fr/" onclick="window.open(this.href); return false;" title="Site de SanDisk">SanDisk</a></li>
                 <li id="mar"><a href="https://www.seagate.com/fr/fr/" onclick="window.open(this.href); return false;" title="Site de Seagate">Seagate</a></li>
            </ul>
     <section class="page">
      <h1>Ordinateur sur mesure</h1>
      <div>
            <label>Carte mère</label>
            <select id="cm">
                <option>-Sélectionner une carte mère-</option>
                <option>MSI MEG X299 CREATION - 580€</option>
                <option>Asus ROG MAXIMUS XI EXTREME - 600€</option>
                <option>Gigabyte Z390 AORUS ULTRA - 290€</option>
                <option>Gigabyte Z390 M GAMING - 150€</option>
                <option>Asus ROG CROSSHAIR VII HERO - 269€</option>
                <option>MSI X470 GAMING PLUS - 145€</option>
            </select>
            <br/>
            <select size="1" id="proco">
                <option>-Sélectionner un processeur-</option>
                <optgroup label="Intel">
                <option>Intel core i9 9900X (3.5Ghz) - 1100€</option>
                <option>Intel core i9 9900K (3.6Ghz) - 600€</option>
                <option>Intel core i7 9700K (3.6Ghz) - 500€</option>
                <option>Intel core i7 8700K (3.7Ghz) - 479€</option>
                <option>Intel core i5 9600K (3.7Ghz) - 314€</option>
                <option>Intel core i5 8600K (3.6Ghz) - 339€</option>
                <option>Intel core i3 8100 (3.6Ghz) - 139€</option>
                <option>Intel core i3 7100 (3.9Ghz) - 149€</option>
                <option>Intel pentium Gold G5400 (3.7Ghz) - 80€</option>
                <option>Intel pentium Gold G4560 (3.5Ghz) - 80€</option>
                <optgroup label="AMD">
                <option>AMD Ryzen 7 2700X (3.7 GHz) - 350€</option>
                <option>AMD Ryzen 7 1700X (3.4 GHz) - 180€</option>
                <option>AMD Ryzen 5 2600X (3.6 GHz) - 229€</option>
                <option>AMD Ryzen 5 1500X (3.5 GHz) - 175€</option>
                <option>AMD Ryzen 3 1300X (3.5 GHz) - 135€</option>
                <option>AMD Ryzen 3 2200G (3.5 GHz) - 107€</option>
                <option>AMD Athlon X4 950 (3.5GHz) - 59€</option>
                <option>AMD FX-8350 (4.0 GHz) - 70€</option>
            </select>
            <br/>
            <select id="cg">
                <option>-Sélectionner une carte graphique-</option>
                <option>i7</option>
                <option>i5</option>
                <option>i3</option>
                <option>xeon</option>
                <option>pentium</option>
            </select>
            <br/>
            <select id="dd">
                <option>-Sélectionner un disque dur-</option>
                <option>i7</option>
                <option>i5</option>
                <option>i3</option>
                <option>xeon</option>
                <option>pentium</option>
            </select>
            <br/>
            <select id="ssd">
                <option>-Sélectionner un SSD-</option>
                <option>i7</option>
                <option>i5</option>
                <option>i3</option>
                <option>xeon</option>
                <option>pentium</option>
            </select>
            <br/>
            <select id="alim">
                <option>-Sélectionner une alimentation-</option>
                <option>i7</option>
                <option>i5</option>
                <option>i3</option>
                <option>xeon</option>
                <option>pentium</option>
            </select>
            <br/>
            <select id="boitier">
                <option>-Sélectionner une boîtier-</option>
                <option>i7</option>
                <option>i5</option>
                <option>i3</option>
                <option>xeon</option>
                <option>pentium</option>
            </select>
            <br/>
            <select id="boitier">
                <option>-Sélectionner une option de montage-</option>
                <option>Monté par nos experts - 20€</option>
                <option>Votre talent - Gratuit (encore heureux)</option>
            </select>
 
      </div>
     </section>
    </body>
</html>

**psychadelic** · 12/05/2019, 22h51

et pourquoi le second script sans aucun total ?

sinon la recopie est mauvaise; voici la bonne :

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
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
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
                /* BASE */
                body {
                        background-color:#dcdcdc;
                        color:#000000;
                        font-family:sans-serif;
                        font-size:medium;
                        font-style:normal;
                        font-weight:normal;
                        line-height:normal;
                        letter-spacing:normal;
                }
                h1,h2,h3,h4,h5 {
                        font-family:serif;
                }
                div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
                        margin:0px;
                        padding:0px;
                }
                p {
                        padding:6px;
                }
                ul,ol,dl {
                        list-style:none;
                        padding-left:6px;
                        padding-top:6px;
                }
                li {
                        padding-bottom:6px;
                }
                div#conteneur {
                        width:95%;
                        margin:12px auto;
                        padding:6px;
                        background-color:#FFFFFF;
                        color:#000000;
                        border:1px solid #666666;
                        font-size:0.8em;
                }               
                div#affiche {
                        margin:12px;
                        padding:6px;
                        border:1px solid #999999;
                        background-color:#FFFFFF;
                        color:#000000;
                }
 
                /* TEST */
                select {
                        margin:12px;
                }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script>
    $(function ()                               // une fois la page chargée...   
    {
      CalcTotal();                             // calcul du total lors du chargement de la page
 
      $("[id^='entree']").change(CalcTotal);  // se déclenche du changement d'un des éléments ayant pour id="entree ...
 
      function CalcTotal()                   // la fonction qui fait le calcul le total
      {
        let total = 0;                                                  // init du total
        $("select[id^='entree']").each(function ()                     // pour chacune des "entree ( entree1 / entree2 / entree3)
        {
          total += parseFloat($(this).prev().text()) * $(this).val(); // retrouve le prix indiqué sur le parent et l'ajoute au total
        });
 
        // méthode directe :
        // $("#total").text(total.toFixed(2) + " €");                  // affiche le prix sur l'IHM
 
        // méthode bouzin : 
        var str_Total_2_decimales = total.toFixed(2);
        var str_Total_Monnaie     = str_Total_2_decimales + " €";
        
        $("#total").text(str_Total_Monnaie);
      }
    }); /// fin de  $(function ()  (== test de page chargée)
  </script>
</head>
 
<body>
  <div id="conteneur">
		<div id="prixEntree1">0.30 €</div>
		<select id="entree1">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree2">0.30 €</div>
		<select id="entree2">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="prixEntree3">0.30 €</div>
		<select id="entree3">
			<option></option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
		</select>
		<div id="total"></div>
	</div>
</body>
</html>