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

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.

**danielhagnoul** · 21/03/2011, 18h27

Envoyé par SpaceFrog

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

Il y a plusieurs ID mydiv dans votre code !

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

**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 = "...";
}

Recuperer ID d'un select

jQuery

Vue hybride

Discussions similaires

Partager

Partager