Choix liste déroulante et affichage PDF

**sahya** · 25/05/2020, 19h14

Bonjour à tous

et merci de me lire

j'ai un problème avec une liste déroulant qui ne fait pas ce que je veux :'(

en gros j'ai créé une liste en dure :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<label for="courx" required></label>
 
<select name="cours" id="cours" onChange="choix_cours()">
 
<option value="choix">Votre choix :</option>
 
<option value="anglais">Anglais</option>
 
<option value="espagnol">Espagnol</option>
 
<option value="neerlandais">Neerlandais</option>
 
</select>

Selon le choix fait dans cette liste, une autre liste déroulantes apparait.
Voici la function qui permet ça:

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
function choix_cours(){
	var info = document.getElementById("cours").value;
	var le_cours = info.substr(0,2);
 
 
	if(info!="choix"){
		//alert("Veuillez BIEN LIRE les modalité pour se cours !");
		document.getElementById("information_cours").innerHTML = "<img src='image/" + le_cours + ".jpg'  height='100' width='150';/>";
 
		tab_niveau = choix_niveau(le_cours).split('|');
		nb_niveau = tab_niveau.length;
 
		chaine_niveau = "<select id='niveau' onChange='verif_niveau(\"" + info + "\")'>";
		chaine_niveau += "<option value='selection'>Sélectionnez un niveau</option>";
 
		for(defil=0;defil<nb_niveau;defil++){
			chaine_niveau += "<option value='" + tab_niveau[defil] + "'>" + tab_niveau[defil] + "</option>";
		}
		chaine_niveau += "</select>";
 
 
		document.getElementById("niveau").innerHTML = chaine_niveau;
 
 
	}

Mon problème est que j'aimerai faire apparaitre lors d'un choix dans cette deuxième liste un pdf... alors j'ai tenter ceci:

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
function verif_niveau(info)
		{
			var info_requis = document.getElementById("information_cours").value;
			if(document.getElementById("niveau").value="UE2 En anglais")
				{
					info_requis = "<object data='image/UE2.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UE3 En anglais")
				{
					info_requis = "<object data='image/UE3.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UE4 En anglais")
				{
					info_requis = "<object data='image/UE4.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UE5 En anglais")
				{
					info_requis = "<object data='image/UE5.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UE6 En anglais")
				{
					info_requis = "<object data='image/UE6.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UF2 En anglais")
				{
					info_requis = "<object data='image/UF2.pdf' type='application/pdf' width='600' height='800'></object>";
				}
			if(document.getElementById("niveau").value="UF3 En anglais")
				{
					info_requis = "<object data='image/UE3.pdf' type='application/pdf' width='600' height='800'></object>";
				}
		}

mais rien n'y fait... il veux pas ....
ça va faire quelque semaine que je cal... pouvez vous m'aider s'il vous plait

**ProgElecT** · 25/05/2020, 21h34

Salut

Sans analyser en détail tout ton code, dans ta fonction function verif_niveau(info) tu initialises la variable info_requis = document.getElementById("information_cours").value;, mais tu ne l'utilises pas, tu l'as remplis sous conditions ?
Et cette même variable, par la suite, tu ne la retournes pas suite à l’événement onchange de ta liste id='niveau'.

Il me semble que ta fonction pourrait se résumer à

Code :

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

1
2
3
4
5
function verif_niveau(info)
		{
			var valueniveau = document.getElementById("niveau").value;
			return "<object data='image/" + valueniveau.slice(0,3) + ".pdf' type='application/pdf' width='600' height='800'></object>";
		}

Dans cette fonction avec ton code, tu as une erreur ICI

Code :

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

1
2
3
4
5
			if(document.getElementById("niveau").value="UF3 En anglais")
				{
					info_requis = "<object data='image/UF3.pdf' type='application/pdf' width='600' height='800'></object>";
					//info_requis = "<object data='image/UE3.pdf' type='application/pdf' width='600' height='800'></object>";
				}

[edit]
function verif_niveau(info), tu n'utilises pas le paramètre info

[/edit]

**sahya** · 26/05/2020, 12h49

ok merci je vais le teste et je te dis qui

**sahya** · 26/05/2020, 14h34

nooonn :'(

je n'arrive pas à récupérer la valeur de sélection.

j'ai fai un console.log(chaine_niveau); pour voir que qu'il me ressort est il me sort ça:

Code HTML :

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

<select id='niveau' onChange='verif_niveau("anglais")'><option value='selection'>Sélectionnez un niveau</option><option value='UE_2 En anglais'>UE_2 En anglais</option><option value='UE_3 En anglais'>UE_3 En anglais</option><option value='UE_4 En anglais'>UE_4 En anglais</option><option value='UE_5 En anglais'>UE_5 En anglais</option><option value='UE_6 En anglais'>UE_6 En anglais</option></select>

mais impossible de récupéré la value...

**ProgElecT** · 26/05/2020, 17h14

Salut

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
<!DOCTYPE html>
<html lang="fr"> <!-- Truc10.html -->
 
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Minimum pour page HTML</title>
 
		<style>
                        /* balise ouvrante pour commentaire dans la partie style, et sa balise fermente */
                        /* ************************************************************************r*** */
                </style>
		<script>
                        'use strict'; // force la déclaration des variables
                        //********************************************************************************
                        //--------------------------------------------------------------------------------
                </script>
 
	</head> 
	<body>	<!-- ............................................................................................................. -->
		<!-- <select id='niveau' onChange='verif_niveau("anglais")'> -->
		<select id='niveau' onChange='AffichecheminPDF()'>
			<option value='selection'>Sélectionnez un niveau</option>
			<option value='UE2'>UE_2 En anglais</option>
			<option value='UE3'>UE_3 En anglais</option>
			<option value='UE4'>UE_4 En anglais</option>
			<option value='UE5'>UE_5 En anglais</option>
			<option value='UE6'>UE_6 En anglais</option>
		</select>
		<script>        // ............................................................................................................. //
                        function AffichecheminPDF(selection)
                        {
                                alert(verif_niveau(selection));
                        }
                        function verif_niveau(info)
                        {
                                var valueniveau = document.getElementById("niveau").value;
                                return "<object data='image/" + valueniveau + ".pdf' type='application/pdf' width='600' height='800'></object>";
                        }
                </script>	<!-- ........................................................................................................... -->
	</body>	<!-- ............................................................................................................. -->
 
</html>

A toi de prendre et adapter pour ton propre code,

Choix liste déroulante et affichage PDF

JavaScript

Vue hybride

Discussions similaires

Partager

Partager