Récupérer les valeurs de plusieurs listes déroulantes

Version imprimable

Bonjour à tous !

Je débute en javascript et donc je suis en phase de découverte/ d'entraînement.

J'ai créé un petit formulaire avec plusieurs listes déroulantes.

Chaque valeur correspond à une somme.

J'aimerais que lors que toutes mes liste déroulantes sont renseignées, dans mon output res s'affiche mon résultat.

Le souci est que je n'arrive pas à exécuter mon code javascript :aie:

Voici mon

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
<!DOCTYPE html>
<!-- saved from url=(0013)about:internet -->
<html>
    <head>
		<link rel="stylesheet" href="Form.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Matrice de caractÃ©risation</title>
 
    </head>
    <body>
		<script type="text/javascript" src="form.js"></script>
		<table>
		<th align="left">INFOS</th>
		<th>CHOIX</th>
		<tr>
			<td>PAYS ORIGINAIRE</td>
			<td>
			<Form>
			<SELECT name="Pays" size="1">
			<OPTION>
			<OPTION>France
			<OPTION>Belgique
			<OPTION>USA
			<OPTION>UK
			</SELECT>
			</Form>
			</td>
		</tr>
		<tr>
			<td>PAYS DE RESIDENCE</td>
			<td>
			<Form>
			<SELECT name="Pays1" size="1">
			<OPTION>
			<OPTION>France
			<OPTION>Belgique
			<OPTION>USA
			<OPTION>UK
			</SELECT>
			</Form>
			</td>
		</tr>
		<tr>
			<td>AGE</td>
			<td>
			<Form>
			<SELECT name="AGE" size="1">
			<OPTION>
			<OPTION>15-25
			<OPTION>25-40
			<OPTION>40-50
			<OPTION>50-60
			</SELECT>
			</Form>
			</td>
		</tr>
		</table>
 
		<form id=form1 class="displayondemand">
            <label>Résultat</label>
            <output name=ress type=text value="">
			<br>
			<input type=button value=Valider onClick="Resul()" /> 
            <input type=reset  value=Annuler>
        </form>

Voici mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Function Resul()
{
var select = document.getElementById("PAYS")
var valeur = select.options[select.selectedIndex].value
var res
 
switch valeur
{
case France;
	res=0;
	alert("FR 2");
	break;
case Belgique;
	res=1;
	alert("BE 1");
	break;
 
}
//Je répète un code similaire pour mes deux autre liste déroulante.
}

Quelqu'un peut-il m'aiguiller svp ?
Merci pour votre aide.

Pour faire simple je regroupe les selects récupères leurs valeurs via le onchange des select mais aussi lors du submit.

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
 
 
 
var selects = document.querySelectorAll('select');
function Resul()
{
  console.log("result")
 
 
//console.log(selects);
  var ouput = "";
  for(let s in selects){
    if(selects[s].value !== undefined){
      console.log(selects[s].value);
      ouput += selects[s].value + ' ';
 
    }
  }
 
  document.getElementById('ress').value = ouput;
 
}
 
 
//pour les selects alert
 
for(let s in selects){
 
  selects[s].onchange = function(){
 
        if(this.value === 'France'){
          res=0;
	        alert("FR 2");
        }
 
        if(this.value === 'Belgique'){
          res=0;
	        alert("BE 1");
        }
//Je répète un code similaire pour mes deux autre liste déroulante.
  }
}

démo : https://codepen.io/headmax/pen/MQGGww?editors=1011

22/02/2018, 16h19
NouveauDev

Génial ! merci pour la démo je vais regarder tout ça :)
23/02/2018, 09h49
NouveauDev

Bonjour,

J'ai essayé de faire comme vous, cependant ça ne fonctionne pas chez moi.
Du coup j'ai retiré le <script src="Form.js" type="text/javascript" charset="utf-8"></script>et j'ai mis la fonction dans mon html. Là ça fonctionne.
Cela veut dire que le lien est mal fait avec mon .js

Il y a t-il quelque chose que j'ai mal déclaré ou que je n'ai pas fais ?

Merci pour votre aide :)