hide options d'un select sous ie

**EIN-LESER** · 02/02/2012, 15h03

Petite question bête

J'ai une petite fonction js qui me cache certains options dans un select en fonction d'un autre champ option.

Sous Firefox pas de soucis (comme d'ab )
sous IE il veut rien savoir.

J'ai cru comprendre, en recherchant sur google que ie ne sait pas cacher les éléments d'un select.

Pourriez vous me dire si il existe quelque chose qui s'en approche ou peut être utilisé a la place please

Merci d'avance

**SpaceFrog** · 02/02/2012, 15h11

Faut pas y aller en douceur ...
pour IE c'est à la manière forte !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<select id="foo">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
</select>
<script type='text/javascript'>
document.getElementById('foo').removeChild(document.getElementById('foo').getElementsByTagName('option')[2])
</script>

**EIN-LESER** · 02/02/2012, 15h26

Le code javascript se trouve dans un fichier .js a part

Voici la partie qui m'embete (vilaine va lol)

J'ai essaye le remouvechild mail il me dit que l'objet ne le gere pas :-~

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
 
//Concerne le filtrage et l'affichage des 3 selects pour la région
	function filtreregion2(){
		var region1=$('#region1 option:selected').attr('id');
 
		$('#region2 option').each(function(index) {
		    if($(this).attr('name')==region1){ $(this).show();}else{$(this).hide();}
		});
		$('#region2 option[name='+region1+']').attr('selected','selected');
 
	}
	function filtreregion3(){
		var region2=$('#region2 option:selected').attr('id');
		$('#region3 option').each(function(index) {
		    if($(this).attr('name')==region2){ $(this).show();}else{$(this).hide();}
		});
		$('#region3 option[name='+region2+']').attr('option:selected','option:selected');
		nb2=$('#region3 option[name='+region2+']').length;
		if (nb2==0) {$('#region3').hide();}else{$('#region3').show();}
 
 
	}		
	filtreregion2();
	filtreregion3();
 
	$('#region1').change(function(evt){
		filtreregion2();
		filtreregion3();

**SpaceFrog** · 02/02/2012, 15h29

je ne vois pas ta tentative de removeChild ???
et en jquery c'est remove()

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
<script type='text/javascript'>
$( function(){
$('#foo option:eq(2)').remove()
})
</script>
</head>
<body>
<select id="foo">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
</select>

**EIN-LESER** · 02/02/2012, 15h38

Avec remove() cela marche bien pour la partie cacher .

Le probleme c'est que si l'user selectionne une autre option a qui il devrait correspondre a cette nouvelle option, comme le remove a tout suppré sa me mets une liste vide systematiquement.

Comment pourrai-je les recuperer?

Sorry d'avance mais je triche pas tu vous

C'est anoncé dans ma& signature lol je suis le specialiste des questions betes ^^

**SpaceFrog** · 02/02/2012, 15h56

Donc du coup faut pas faire un remove()
il faut le stocker temporairement ailleurs

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'>
$( function(){
$('body').append( $('<select/>').attr('id','tempsel').css('display','none'))
$("#rem").click(function(){
  ind=$("#optindex").val()
  $('#tempsel').append( $('#foo').find('option[value="'+ind+'"]') )
})
 
$("#add").click(function(){
  ind=$("#optindex").val()
  $('#foo').append( $('#tempsel').find('option[value="'+ind+'"]') )
})
 
})
</script>
</head>
<body>
 
<select id="foo">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
</select>
 
<input type="button" value="remove" id="rem" />
<input type="button" value="add"  id="add" /> 
<input type="text" value="" id="optindex" />
</html>

ici la selection s'opère sur le value et je ne gère pas la position dans le select

hide options d'un select sous ie

jQuery

Vue hybride

Discussions similaires

Partager

Partager