it-swarm.com.de

style.display = "none" funktioniert nicht mit Options-Tags in Chrome, aber in Firefox

ok, hier ist ein Beispielcode, der das Problem veranschaulicht. Wenn ich auf die Schaltfläche in Firefox klicke, verschwindet die erste Option. Wenn ich auf die Schaltfläche in Chrom klicke, geschieht nichts, oder wenn ich die erste Option inspiziere Es hat zwar das Attribut "style = 'display: none'", aber die Option selbst auf der HTML-Seite ist nicht ausgeblendet.

<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>

warum funktioniert das nicht in Chrom?

35
user280109

Die Problemumgehung besteht darin, die option-Elemente als Reaktion auf Ihr Ereignis zu entfernen und sie bei Bedarf wieder hinzuzufügen. IIRC, IE erlaubt es Ihnen nicht, die display für none auf option zu setzen. Ich würde empfehlen, die entfernten Elemente in einem Array zu speichern, damit Sie sie leicht wieder hinzufügen können.

23
Russ Cam

Wahrscheinlich müssen Sie den <option> entfernen, anstatt ihn zu "verstecken". Wenn es keine Lösung für Sie ist, versuchen Sie es zu deaktivieren.

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

PS: Möglicherweise möchten Sie getElementsByTagName('option') noch einmal überdenken. Sie können unordentlich werden, wenn Sie mehr <select>-Elemente haben.

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>

Ich habe es schnell zum Laufen gebracht, indem ich es einfach aus dem ParentNode entfernte ... offensichtlich wird das ein Hack.
Ich werde versuchen, eine bessere Lösung für Sie zu finden =) 

Willkommen bei Stack Overflow

2
Warty

Als meine Lösung (asp.net) .Ich versuche es auf diese Weise. 1. Erstellen Sie eine DropDowlist, um alle ListItems Zu verwenden in asp: dropdowlist Elemente)

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

Die Frage ist eher, warum das in jedem Browser überhaupt funktioniert?

Die Optionen werden nicht als Elemente auf der Seite verwendet. Sie enthalten die Informationen, die im select-Element angezeigt werden. Bei einigen Browsern können Sie einige Stile auf die Optionen anwenden. Im Allgemeinen können Sie jedoch keine Cross-Browser-Unterstützung für Stile erwarten.

Wenn Sie verhindern möchten, dass eine Option angezeigt wird, müssen Sie sie nur aus der Auswahl entfernen.

1
Guffa

Zum Löschen einer Option aus dem Auswahlformular kann jQuery $ (). Eq (). Remove () oder $ (). Remove () verwendet werden.

Ähnlich war das Löschen einer Tabellenzeile aus der Tabelle:

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

woher:

$('form table tr')

nehmen Sie an, dass das entfernte Element eine Tabellenzeile (tr) aus einer in Formular (Formtabelle) eingeschlossenen Tabelle sein wird.

eq(1)

sagen, dass entfernt wird das zweite Element (Element mit Indexnummer 1)

remove()

sagen, dass das Element entfernt wird.

Wenn dies jedoch für die Option verwendet werden soll, wäre (zum Beispiel) alles, was benötigt wird:

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

weil es einfacher ist, eine Option nach Wert als nach Indexnummer zu finden (es sei denn, Sie hätten mehr Optionen mit demselben Wert - aber es ist Unsinn, solche Optionen zu haben). Die Verwendung der Indexnummer ist sinnvoll, wenn Sie keine anderen Elemente zum Suchen des entfernten Elements verwenden.

Sie können natürlich auch Formularnamen oder Formularnamen hinzufügen und den Namen (oder die ID oder Klasse) für die Elementidentifikation auswählen

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

die erste Option ist jedoch aufgrund der serverseitigen Prozesse, bei denen Sie das Attribut name anstelle von id oder class verwenden müssen, besser und logischer.

1
Václav

Lösung:

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;

Die Auswahlbox wurde in Größe 2 geändert (wie mehrere), funktioniert jedoch . Dieser Trick funktioniert nicht unter Safari :(

0
Attila Molnár

Ich weiß, das ist jetzt alt, aber Sie könnten - vor allem, wenn Sie jQuery verwenden, um Eltern zu ändern.

<!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