Recuperer ID d'un select

Version imprimable

Bonjour,

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

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
 
<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

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

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");

13/03/2011, 11h36
SpaceFrog
Code:

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 ??????
13/03/2011, 12h03
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
13/03/2011, 12h52
SpaceFrog

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

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:

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.

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

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
 
<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

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

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
 
<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 ...

19/03/2011, 13h38
isitien
out is not defined
Code:

1 2 $('.'+out).change(function(){
sachant que je l'utilise etant que class
21/03/2011, 09h14
SpaceFrog

on peut voir le code que tu testes ??
21/03/2011, 10h40
danielhagnoul
Bonjour

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

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

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
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:

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

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:

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>

22/03/2011, 03h42
isitien

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 :ccool:

Bonjour

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
            /*
             * 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);
					});
				}
			});

25/03/2011, 07h24
isitien

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