Recuperer ID d'un select

isitien · 13/03/2011, 07h28

Bonjour,

Je voudrais recuperer l'ID d'un select afin de l'utiliser ulterieurement:

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
 
<script type="text/javascript" >
$(document).ready(function() {
 
		$("#select1").change(function(){
 
 
		var select_name = $(this).attr("name");
		var select_id = $(this).attr("id");		
		var my_select 		= $("#select1 option:selected");
		//Récupération des valeurs du formulaires
		var my_select_val 		= $("#select1 option:selected").val();
 
 
		console.log(my_select_val);
 
 
			if (my_select_val == 'all')
		  {
		  	$(".output2").hide();
		  	$(".output3").hide();	
		  	$(".output1").show();
		  }
 
		  if (my_select_val == 'nationality')
		  {	
		  	$(".output1").hide();
		  	$(".output3").hide();
		  	$(".output2").show();
		  }
 
		  if (my_select_val == 'tel')
		  {
			$(".output1").hide();
		  	$(".output2").hide();
		  	$(".output3").show();
		  }
 
});
 
 
		// ICI JE VOUDRAIS METTRE l'ID DE LA VALEUR PRE-SELECTIONNEE
	$("select").change(function(){
 
 
 
 
		return false;
	}); // end DOM
 
 
 
 
</script>

Merci

Bovino · 13/03/2011, 11h19

Il suffit de déclarer ta variable dans le scope de la fonction où tu souhaites l'utiliser...

Code :

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

1
2
3
4
5
6
7
$(document).ready(function() {
		var select_id
		$("#select1").change(function(){
 
 
		var select_name = $(this).attr("name");
		select_id = $(this).attr("id");

SpaceFrog · 13/03/2011, 11h36

Code :

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

1
2
3
$("#select1").change(function(){
		var select_name = $(this).attr("name");
		select_id = $(this).attr("id");

je serais curieux de savoir l'utilité de la chose au vu du selecteur $("#select1")
select_id ne peux valloir que select1 ??????

isitien · 13/03/2011, 12h03

On a le premier select qui genere un autre select, j'aimerais recuperer l'id du premier select afin de l'utiliser comme variable au 2eme select

SpaceFrog · 13/03/2011, 12h52

un id doit être unique sur la page ....

isitien · 14/03/2011, 04h13

Citation:

Envoyé par SpaceFrog

un id doit être unique sur la page ....

Oui, tous mes ID sont unique, voila le code HTML apres selection de la premiere liste et l'apparition de la 2eme liste:

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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<head>
<style type="text/css">
#msg, #error {
	/* padding-top: 0px; */
	margin-top:  0px;
	width: 500px;
	background-color: #FF33cc;
	color: #000000;
	text-align: center;
	cursor: pointer;
	display: none;
}
</style>
 
<script src="jquery.js" type="text/javascript"></script>
 
<script type="text/javascript" >
$(document).ready(function() {
 
		$("#select1").change(function(){
 
 
		var select_name = $(this).attr("name");
		var select_id = $(this).attr("id");
 
		console.log(select_name);
		console.log(select_id);
 
 
		var my_select 		= $("#select1 option:selected");
 
		//Récupération des valeurs du formulaires
		var my_select_val 		= $("#select1 option:selected").val();
 
 
		console.log(my_select_val);
 
 
			if (my_select_val == 'all')
		  {
		  	$(".output2").hide();
		  	$(".output3").hide();	
		  	$(".output1").show();
		  }
 
		  if (my_select_val == 'nationality')
		  {	
		  	$(".output1").hide();
		  	$(".output3").hide();
		  	$(".output2").show();
		  }
 
		  if (my_select_val == 'tel')
		  {
			$(".output1").hide();
		  	$(".output2").hide();
		  	$(".output3").show();
		  }
 
		//return my_select_val;
});
	//return false;
 
	//var me = my_select_val;
 
	//console.log(me);
 
 
	$("select").change(function(){
 
 
		var select_name2 = $(this).attr("name");
		var select_id2 = $(this).attr("id");
 
		console.log(select_name2);
		console.log(select_id2);
 
 
		var my_select2 		= $("#select2 option:selected");
 
		//Récupération des valeurs du formulaires
		var my_select2_val 		= $("#select2 option:selected").val();
 
 
		console.log(my_select2_val);
 
 
			if (my_select2_val == 'all1')
		  {
		  	$(".output_page").html('all1');
		  }
 
		  if (my_select2_val == 'all2')
		  {	
		  	$(".output_page").html('all2');
		  }
 
		  if (my_select2_val == 'all3')
		  {
			$(".output_page").html('all3');
		  }
 
		  if (my_select2_val == 'all4')
		  {
			$(".output_page").html('all4');
		  }
 
});
 
 
 
	return false;
 
	}); // end DOM
 
 
 
 
</script>
 
 
</head>
<body>
<div align="right">
<select name="select1" id="select1">
<option value="all">All</option>
 
<option value="nationality">nationality</option>
<option value="tel">tel</option>
</select>
<span id="loading"></span>
</div>
 
<div class="output1" id="mydiv" style="display: none">
<select name="select2" id="select2">
<option value="all1">All1</option>
<option value="all2">All2</option>
<option value="all3">All3</option>
<option value="all4">All4</option>
 
</select>
</div>
 
<div class="output2" id="mydiv" style="display: none">
<select name="select3" id="select3">
<option value="nationality1">nationality1</option>
<option value="nationality2">nationality2</option>
<option value="nationality3">nationality3</option>
<option value="nationality4">nationality4</option>
</select>
</div>
 
<div class="output3" id="mydiv" style="display: none">
 
<select name="select4" id="select4">
<option value="tel1">tel1</option>
<option value="tel2">tel2</option>
<option value="tel3">tel3</option>
<option value="tel4">tel4</option>
</select>
</div>
 
<div class="output_page"></div>
 
 
 
</body>
 
</html>

Bref, je voudrais generer une liste a partir d'une autre, lorsque je genere la premiere liste par exemple telephone, j'obtiens une autre avec tel1, tel2,... ainsi de suite, comment puis je recuperer et mettre l'ID de la premiere select en une variable afin de l'utiliser dans la 2eme fonction afin de verifier par if.

isitien · 18/03/2011, 04h56

j'ai pu recupere l'ID de la select nouvellement generee, comment puis je l'utiliser etant que variable en ma 2eme fonction:

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
 
<script type="text/javascript" >
$(document).ready(function() {
 
        $("#select1").change(function(){
 
        if ()
          {
              var out = "element1";
          }
 
          if ('')
          {              
              var out = "element2";
          }
 
          if ()
          {              
              var out = "element3";
          }
});
 
 
    // Si je mets out.change je recois un message d'erreur: out is not defined
    out.change(function(){
 
 
});
    return false;
 
    }); // end DOM
 
</script>

Merci

SpaceFrog · 18/03/2011, 08h39

simple rappel ...
un id est un string ...

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
 
<script type="text/javascript" >
$(document).ready(function() {
 
        $("#select1").change(function(){
 
        if ()
          {
              var out = "element1";
          }
 
          if ('')
          {              
              var out = "element2";
          }
 
          if ()
          {              
              var out = "element3";
          }
});
 
 
    // Si je mets out.change je recois un message d'erreur: out is not defined
    $('#'+out).change(function(){
 
 
});
    return false;
 
    }); // end DOM
 
</script>

Si j'ai bien compris la demande ...

isitien · 19/03/2011, 13h38

out is not defined

Code :

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

1
2
 
$('.'+out).change(function(){

sachant que je l'utilise etant que class

SpaceFrog · 21/03/2011, 09h14

on peut voir le code que tu testes ??

danielhagnoul · 21/03/2011, 10h40

Bonjour

La variable out est déclarée dans chaque if, elle donc inconnue ailleurs !

Code :

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

1
2
3
4
5
var out = "";
 
if (...){
   out = "...";
}

isitien · 21/03/2011, 12h46

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
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
 
<head>
<script src="jquery.js" type="text/javascript"></script>
 
<script type="text/javascript" >
$(document).ready(function() {
 
		$("#select1").change(function(){
 
 
 
		var select_name = $(this).attr("name");
		var select_id = $(this).attr("id");
 
		var my_select 		= $("#select1 option:selected");
 
		//Récupération des valeurs du formulaires
		var my_select_val 		= $("#select1 option:selected").val();
 
			if (my_select_val == 'all')
		  {
		  	$(".output2").hide();
		  	$(".output3").hide();	
		  	$(".output1").show();
		  	var out = $("#select2");
		  }
 
		  if (my_select_val == 'nationality')
		  {	
		  	$(".output1").hide();
		  	$(".output3").hide();
		  	$(".output2").show();
		  	var out = $("#select3");
 
//		return out;
 
 
});
 
return false;
 
		out.change(function(){
 
 
		var select_name3 = $(this).attr("name");
		var select_id3 = $(this).attr("id");
 
		var my_select3 		= $("#select3 option:selected");
 
		//Récupération des valeurs du formulaires
		var my_select3_val 		= $("#select3 option:selected").val();
 
 
		console.log(my_select3_val);
 
});
 
 
 
	return false;
 
	}); // end DOM
 
</script>
 
 
</head>
<body>
<div align="right">
<select name="select1" id="select1">
<option value="all">All</option>
<option value="nationality">nationality</option>
<option value="tel">tel</option>
</select>
<span id="loading"></span>
</div>
 
<div class="output1" id="mydiv" style="display: none">
<select name="select2" id="select2" class="selecton">
<option value="all1">All1</option>
<option value="all2">All2</option>
<option value="all3">All3</option>
<option value="all4">All4</option>
</select>
</div>
 
<div class="output2" id="mydiv" style="display: none">
<select name="select3" id="select3" class="selecton">
<option value="nationality1">nationality1</option>
<option value="nationality2">nationality2</option>
<option value="nationality3">nationality3</option>
<option value="nationality4">nationality4</option>
</select>
</div>
 
<div class="output3" id="mydiv" style="display: none">
<select name="select4" id="select4" class="selecton">
<option value="tel1">tel1</option>
<option value="tel2">tel2</option>
<option value="tel3">tel3</option>
<option value="tel4">tel4</option>
</select>
</div>
 
<div class="output_page"></div>
 
</body>
</html>

L'idee c'est de generer une 2eme liste depuis la premiere, et quand on genere la 2eme liste on doit parcourir une page par load('page.php')

Par exemple je choisis nationality, j'obtiens une 2eme liste nationality1, 2, 3 et 4, quand je selectionne par exemple nationality2, je genere une page php.

J'ai voulu genere la premiere liste, mettre l'id qui est la variable 'out' et le recuperer afin de mettre le code de la 2eme partie.

Code :

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

1
2
3
4
5
 
 
out.change(function(){
load(out.php); // par exemple
});

danielhagnoul · 21/03/2011, 18h27

Citation:

Envoyé par SpaceFrog

un id doit être unique sur la page ....

Il y a plusieurs ID mydiv dans votre code !

Citation:

Envoyé par isitien

On a le premier select qui genere un autre select, j'aimerais recuperer l'id du premier select afin de l'utiliser comme variable au 2eme select

Bonjour

Si j'ai bien compris ce que vous souhaitez réaliser, ce n'est pas la bonne méthode.

Exemple :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">	
	<style>
		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; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Test */
		.divSelect {float:right; width:400px; height:150px; margin:12px; padding:6px; border:1px solid grey; background-color:lightgreen; }
		.displayNone {display:none; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div class="divSelect" data-nb="0">
			<select>
				<option data-nb="1">All</option>
				<option data-nb="2">nationality</option>
				<option data-nb="3">tel</option>
			</select>
			<span id="loading"></span>
		</div>
 
		<div class="divSelect displayNone" data-nb="1">
			<select>
				<option>All 1</option>
				<option>All 2</option>
				<option>All 3</option>
				<option>All 4</option>
			</select>
		</div>
 
		<div class="divSelect displayNone" data-nb="2">
			<select>
				<option>nationality 1</option>
				<option>nationality 2</option>
				<option>nationality 3</option>
				<option>nationality 4</option>
			</select>
		</div>
 
		<div class="divSelect displayNone" data-nb="3">
			<select>
				<option>tel 1</option>
				<option>tel 2</option>
				<option>tel 3</option>
				<option>tel 4</option>
			</select>
		</div>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
			var objDivSelect = $("div.divSelect");
 
			objDivSelect.children("select").change(function(){
				var obj = $(this),
					objParent = $(this).parent(),
					n = obj.children(":selected").data("nb");
 
				console.log("Valeur = " + obj.val());
 
				if (objParent.data("nb") == 0){
					objParent.fadeOut(400, function(){
						objDivSelect.eq(n).fadeIn(400);
					});
				}
			});
		});
	</script>
</body>  
</html>

isitien · 22/03/2011, 03h42

ca marche danielhagnoul, mais je n'ai pas compris le code

Je voudrais pas mettre du copier/coller, mais je voudrais comprendre le code tout d'abord avant de l'utiliser, merci

danielhagnoul · 24/03/2011, 09h46

Bonjour

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
            /*
             * Désolé, j'avais bien vu votre message, mais je n'avais
             * pas le temps d'y répondre.
             *
             * Expliquer mon code en français !
             * Cela équivaut pour moi à le comprendre un peu moins bien. ;)
             *
             * Il n'y a ici que du jQuery de base !
             *
             * La seule astuce c'est l'utilisation des attributs data-nb,
             * que l'on prend soin de numéroté de 0 à n pour pouvoir
             * utiliser directement leur valeur dans le sélecteur eq()
             */
 
            /*
             * On sélectionne toutes les divisions ayant la classe divSelect
             */
			var objDivSelect = $("div.divSelect");
 
            /*
             * Dans chacune des divisions sélectionnées, on sélectionne
             * tous les enfants <select>. Sur chacun des <select> on place
             * un gestionnaire d'événement change pour gérer les conséquences
             * de l'action de l'utilisateur
             */
			objDivSelect.children("select").change(function(){
				var obj = $(this), // le select
					objParent = $(this).parent(), // la div parent du select
					n = obj.children(":selected").data("nb"); // l'option sélectionnée et la valeur de l'attribut data-nb
 
                // la valeur de l'option sélectionnée
				console.log("Valeur = " + obj.val());
 
                /*
                 * Si l'attribut data-nb de la division parente est 0,
                 * alors cacher la division et ensuite montrer la division
                 * dont la valeur de l'attribut data-nb correspond à la valeur
                 * de l'attribut data-nb de l'option sélectionnée.
                 */
				if (objParent.data("nb") == 0){
					objParent.fadeOut(400, function(){
						objDivSelect.eq(n).fadeIn(400);
					});
				}
			});

isitien · 25/03/2011, 07h24

Merci danielhagnoul pour l'explication, je vais la reviser et refaire le travail

13/03/2011, 12h52	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	un id doit être unique sur la page .... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

21/03/2011, 09h14	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	on peut voir le code que tu testes ?? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

13/03/2011, 12h03	#4
isitien Membre du Club Inscription : janvier 2007 Messages : 410 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 410 Points : 56 Points : 56	On a le premier select qui genere un autre select, j'aimerais recuperer l'id du premier select afin de l'utiliser comme variable au 2eme select
	00

22/03/2011, 03h42	#14
isitien Membre du Club Inscription : janvier 2007 Messages : 410 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 410 Points : 56 Points : 56	ca marche danielhagnoul, mais je n'ai pas compris le code Je voudrais pas mettre du copier/coller, mais je voudrais comprendre le code tout d'abord avant de l'utiliser, merci
	00

25/03/2011, 07h24	#16
isitien Membre du Club Inscription : janvier 2007 Messages : 410 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 410 Points : 56 Points : 56	Merci danielhagnoul pour l'explication, je vais la reviser et refaire le travail
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email