style.display = 'none' ne fonctionne pas sur les balises d'option dans Chrome, mais c'est le cas dans Firefox, quelqu'un sait pourquoi? ou une solution de contournement?

Question

style.display = 'none' ne fonctionne pas sur les balises d'option dans Chrome, mais c'est le cas dans Firefox, quelqu'un sait pourquoi? ou une solution de contournement?

Demandé el 24 de Février, 2010: Quand la question a-t-elle été
39028 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

ok, voici un exemple de code qui illustre le problème. si je clique sur le bouton dans firefox, la première option disparaît. si je clique sur le bouton en chrome, rien ne se passe, ou plutôt si j'inspecte la première option, elle a bien l'attribut "style = 'display: none'" mais l'option elle-même sur la page html n'est pas masquée.

 <form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName('option')[0].style.display='none'" value="hide option 1">
</form>

Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas dans Chrome? et quelqu'un connaît-il une solution de contournement?

Demandé el 24 de Février, 2010 par user280109

Answer 1

5 Réponses

Answer 2

24voto

Russ Cam Points 58168

La solution de contournement consiste à supprimer les éléments option en réponse à votre événement et à les rajouter si et quand ils sont nécessaires. IIRC, IE ne vous permettra pas de définir display à none sur les éléments option . Je conseillerais de stocker les éléments supprimés dans un tableau afin que vous puissiez facilement les ajouter à nouveau.

Répondu el 24 de Février, 2010 par Russ Cam (58168 Points )

Answer 3

7voto

o.k.w Points 15721

Vous devez probablement supprimer le <option> au lieu de le "masquer". Si ce n'est pas une solution pour vous, essayez de la désactiver.

 document.getElementsByTagName('option')[0].disabled='disabled'

PS: Vous voudrez peut-être reconsidérer l'utilisation de getElementsByTagName('option') , peut devenir compliqué si vous avez plus d'éléments <select> .

Répondu el 24 de Février, 2010 par o.k.w (15721 Points )

Answer 4

2voto

Warty Points 4663

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
    var theSelect = document.getElementById("theSelect");
    var theOption = document.getElementById("theOption");
    theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id="theSelect">
<option>1</option>
<option id="theOption">2</option>
<option>3</option>
</select>
<input type="button" onclick="removeIt()" value="remove it!"/>
</body>
</html>

Je l'ai rapidement fait fonctionner en le supprimant simplement de son parentNode ... évidemment, cela va être un hack.
Je vais essayer de trouver une meilleure solution pour vous =)

Au fait, bienvenue dans Stack Overflow

Répondu el 24 de Février, 2010 par Warty (4663 Points )

Answer 5

1voto

Guffa Points 308133

La question est plutôt de savoir pourquoi cela fonctionne dans n'importe quel navigateur?

Les options ne sont pas utilisées comme éléments dans la page, elles contiennent les informations à afficher dans l'élément select. Certains navigateurs vous permettent d'appliquer certains styles aux options, mais en général, vous ne pouvez pas vraiment vous attendre à une prise en charge croisée pour tous les styles.

Si vous souhaitez empêcher l'affichage d'une option, il vous suffit de la supprimer de la sélection.

Répondu el 24 de Février, 2010 par Guffa (308133 Points )

Answer 6

1voto

nguyencaoan Points 11

Comme ma solution (asp.net). J'essaie de faire de cette façon. 1.Créez une liste déroulante tous les ListItems 2.Utilisez javscript pour ajouter ou supprimer des ListItems (Remarque: l'option d'ajout nécessite la même valeur et le même texte dans asp: éléments de la liste déroulante)

 function removeOptionSelected()
{
  var ddl = document.getElementById('ddl_DropList');
  var i;
  for (i = ddl.length - 1; i>=0; i--) {

      ddl.remove(i);
  }
}
function addOptions3()
{
     removeOptionSelected();
     var ddl = document.getElementById('ddl_DropList');
    var elOptNew = document.createElement('option');

    elOptNew.text = 'Monthly Top Producer(Project)';
    elOptNew.value = 'GCE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - DD';
    elOptNew.value = 'DRE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - SDD';
    elOptNew.value = 'DRESDD';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - GD';
    elOptNew.value = 'GRE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
      }
      catch(ex) {
        ddl.add(elOptNew); // IE only
      }

Répondu el 6 de Octobre, 2011 par nguyencaoan (11 Points )

style.display = 'none' ne fonctionne pas sur les balises d'option dans Chrome, mais c'est le cas dans Firefox, quelqu'un sait pourquoi? ou une solution de contournement?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

style.display = 'none' ne fonctionne pas sur les balises d'option dans Chrome, mais c'est le cas dans Firefox, quelqu'un sait pourquoi? ou une solution de contournement?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: