web-dev-qa-db-fra.com

style.display = 'none' ne fonctionne pas sur les balises d'option en chrome, mais dans Firefox

ok, voici quelques exemples 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 je inspecte la première option il possède 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>

pourquoi ça ne marche pas en chrome?

javascriptfirefoxcoding-stylegoogle-chrome
35
user280109

La solution 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 les éléments 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 rajouter.

23
Russ Cam

Vous devez probablement supprimer le <option> au lieu de le "cacher". 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'), cela peut devenir compliqué si vous avez plus d'éléments <select>.

6
o.k.w
<!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 à Stack Overflow

2
Warty

En tant que ma solution (asp.net) .J’essaie de le faire de cette façon . 1.Créez une liste déroulante de tous les ListItems 2.Utiliser javscript pour ajouter ou supprimer des ListItems dans asp: éléments dropdowlist)

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
      }
1
nguyencaoan

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

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

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

1
Guffa

Pour supprimer une option du formulaire de sélection, vous pouvez utiliser $ (). Eq (). Remove () ou $ (). Remove () de jQuery.

De manière similaire, j'ai supprimé une ligne de la table:

$('form table tr').eq(1).remove();

où:

$('form table tr')

disons que l'élément supprimé sera la ligne de table (tr) de la table incluse dans le formulaire (table de formulaire).

eq(1)

disons que le deuxième élément sera supprimé (élément d'indice numéro 1)

remove()

dire que cet élément sera supprimé.

Mais quand ceci devrait être utilisé en option, alors tout le nécessaire serait (par exemple):

$('select option[value="1"]').remove();

car il est plus simple de rechercher des options par valeur que par numéro d’index (à moins que vous ayez plus d’option avec la même valeur - mais c’est absurde de disposer de telles options). L'utilisation du numéro d'index est utile si vous ne pouvez utiliser aucun autre élément pour rechercher un élément supprimé.

Vous pouvez aussi bien sûr ajouter un nom de formulaire ou un nom de formulaire et sélectionner un nom (ou un identifiant ou une classe) dans l'identification de l'élément.

$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();

mais la première option est meilleure - et plus logique, en raison de processus côté serveur, où vous devez utiliser l'attribut name à la place de id ou class.

1
Václav

Solution:

var ua = navigator.userAgent.toLowerCase();

var check = function(r) { return r.test(ua);};

var isChrome = check(/chrome/);
`
var f=document.getElementById('select_tag_id');

f.options[i].style.display='none';

if (isChrome) f.size=2;

La boîte de sélection a changé à 2 taille (comme multiple), mais en travaillant . Cette astuce ne fonctionne pas sous safari :(

0
Attila Molnár

Je sais que cela est maintenant vieux, mais vous pourriez le faire, surtout si vous utilisez jQuery change parent.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo Page</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>

            function sourceListChange() {
                var oVisible = $('#destList');
                var newCategory = $( "#sourceList" ).val()||'';
                var oToShow = $();

                oHiddenDestList.append(oVisible.find('option'));

                if (newCategory) {
                    oToShow = oHiddenDestList.find('.'+newCategory);
                }           

                if (oToShow.length==0) {
                    oVisible.append (oHiddenDestList.find('.NA'));
                } else if (oToShow.length!=1) {
                    oVisible.append (oHiddenDestList.find('.SELECT'));
                }
                oVisible.prop('selectedIndex', 0);

                oVisible.append (oToShow);
            }

            $(document).ready(function() {
                sourceListChange();
            });

            var oHiddenDestList = $(document.createElement('select'));

        </script>
        <style>

        </style>
    </head>

    <body>

        Select a parent group:
        <select id="sourceList" onchange="sourceListChange()">
            <option class="SELECT" value="" selected disabled>Please Select</option>
            <option value="veg">Vegetables</option>
            <option value="fruit">Fruit</option>
        </select>

        <select id="destList">
            <option class="SELECT" value="*" selected disabled>Please Select</option>
            <option class="NA" value="" selected disabled>Not Applicable</option>
            <option class="fruit">Apple</option>
            <option class="fruit">Bannana</option>
            <option class="veg">Carrot</option>
            <option class="veg">Pea</option>
        </select>       
    </body>
</html>
0
Denzil Newman