11497 sujets

JavaScript, DOM et API Web HTML5

Fonction hide et show ne fonctionne pas sous IE

Bonjour,
dans un formulaire je test la valeur d'un champs pour afficher/masquer des valeurs dans un select. si je met 0 alors je cache l'option "rouge" dans le select. si différent de 0 alors j'affiche "bleue" et "rouge" afin que l'internaute a le choix.
Mon code fonctionne très bien sous FF et sous chrome mais sous Internet Explorer il ne fonctionne pas. Au lieu d'avoir les lignes qui se cachent elles restent toutes visibles sous IE.
Voici mon code :
dans mon header je met :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Dans mon Body (mon formulaire avec le js)

$(document).ready(function(){
	// Rend invisible tous les éléments qui on la classe cacher
	$(".cacher").hide();
	//lors du changement de selection de la liste portant l'id nbrcouleurs
	$("#NBRcouleurs").change(function(){
		// si la liste qui porte l'id nbrcouleurs a une option choisie donc différente de zéro alors
		if($("#NBRcouleurs").val() != "0"){
			// on affiche les éléments qui on la classe cacher
			$(".cacher").show();
		}
		else{
			//sinon on les caches de nouveaux
			$("#couleur").val("bleu");
			$(".cacher").hide();
		}
	})
});

<strong class="titreform">Nombre de couleurs</strong>
<input name="NBRcouleurs" type="text" class="validate[required,custom[onlyNumber],length[0,5]] text-inputreq" id="NBRcouleurs" size="3" maxlength="2" />
<div class="clear10"></div>
<strong class="titreform">Choix couleurs
<select name="couleur" id="couleur">
	<option value="rouge" class="cacher">rouge</option>
	<option value="bleu" selected="selected">Bleu</option>
</select>


test du code ici (a tester sur IE et FF)
Modifié par fabrice88 (25 Feb 2014 - 14:45)
Bonjour fabrice88,

En effet IE limite les styles sur les listes déroulantes : le display: none; sur <option /> n'a aucun effet.
Il faudrait plutôt jouer sur le DOM : supprimer/ajouter des <option /> dans le <select />.

Voici un exemple de code basé sur votre structuration :
$(document).ready(function(){
  
  // cd = couleurdefini
  var cd = {
    // récupération de toutes les balises <option /> du select #couleurdefini
    $options : $('#couleurdefini option').clone(),
    // suppression du DOM des balises <option /> à cacher
    hide : function() {
      $('#couleurdefini option.cacher').remove();
      $("#couleurdefini").val("bleu");
    },
    // injection de toutes les balises <option />
    showAll : function() {
      $('#couleurdefini').empty().append(this.$options);
    }
  }
  
  // initialisation.
  cd.hide();
  
  //lors du changement de selection de la liste portant l'id nbrcouleurs
  $("#nbrcouleurs").change(function(){
    // si la liste qui porte l'id nbrcouleurs a une option choisie donc différente de zéro alors
    if($("#nbrcouleurs").val() != "0"){
      cd.showAll();
    }
    else{
      cd.hide();
    }
  })
  
});

1 - Ce script copie préalablement tous les <option /> disponibles du <select /> #couleurdefini.
2 - Il supprime ensuite tous les <option /> ayant la classe .cacher.
3 - Si toutes les couleurs sont demandées, le script vide totalement le <select /> #couleurdefini et réinjecte tous les <option /> dans l'ordre de préenregistrement.

Espérant que cela corresponde à votre attente. Bon code...
Modifié par Guiwint (25 Feb 2014 - 16:57)
Sujet clos
Aller à