display: none funktioniert nicht für die Option

Demo here display: none funktioniert nicht für die Option

HTML:

display:none <b>not works</b>,the hidden can <b>not select</b>.<br> 
<select size="5"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select><br> 

display:none <b>works</b>,the hidden <b>can select</b>.<br> 
<select> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select>

CSS:

select{width:50px;} 

[value=C]{ 
    display: none; 
} 
/* will hold the position */ 
[value=B]{ 
    visibility: hidden; 
}

Die Größe Attribut die Anzeige und die Sichtbarkeit beeinflussen, was dies geschehen ?

Wie kann ich die Option in auswählen, die ein size Attribut hat?

Quelle

2013-10-09 wener

ich kann nicht t Wählen Sie das ausgeblendete Element in beiden Stichproben aus. Warum hast du da überhaupt eine Option, wenn du sie nicht brauchst? Lassen Sie es einfach aus der Liste aus. – knittl

Sie können "display" nicht auf ein Optionsfeld in Chrome und IE setzen. -> http://glidingphenomena.blogspot.ch/2010/06/styledisplaynone-doesnt-work-on-option.html –

@dTDesign Aber es funktioniert unter chrome, wenn die Auswahl nicht Größe Attribut haben. Ich möchte zeigen, dass die Ergebnisse des Spiels die Ursprungsauswahl verwenden und nicht DOM op verwenden. – wener

aktualisiert Siehe Abschnitt

Ich glaube, Sie nicht tun können, dass nur mit CSS für alle Browser einige brauchen JS-Code, gibt es eine vorherige Frage ganz ähnlich:

How to hide a <option> in a <select> menu with CSS?

In Chrome (v. 30) "display: none" nicht funktioniert, howeve r in Firefox (v. 24) Es funktioniert, die Option mit "display: none" erscheint nicht in der Liste.

UPDATE: (v. 43) (v. 38.0.1)

In dem aktuellen Chrome eines Firefox-Versionen, die Verwendung von CSS mit "display: none" entfernt die Option aus der Liste, ist aber nicht „perfekt“, zum Beispiel, in diesem Beispiel:

<html><body> 
    <select> 
     <option style="display:none">Hola</option> 
     <option>Hello</option> 
     <option>Ciao</option> 
    </select> 
</body></html>

die Option „Hola“ erscheint nicht, wenn Sie die comboBox erweitern, das heißt, es kann nicht ausgewählt werden, aber es scheint, als Option standardmäßig aktiviert, wenn Sie laden die Seite zum ersten Mal.

Quelle

2013-10-09 11:22:50 Roberto

Funktioniert jetzt in Chrome. – Pacerier

Es ist eine Technik, die in diesem Beitrag Optionen innerhalb einer ausgewählten versteckt: How to hide a <option> in a <select> menu with CSS?

Quelle

2013-10-09 11:14:53 acairns

Verwenden jQuery folgenden verstecken und zeigen unter ausgewählten

jQuery(selector).toggleOption(true); // show option 
jQuery(selector).toggleOption(false); // hide option

Quelle

2013-10-09 11:54:23

Ich sehe niemanden, der über jQuery spricht. – Pacerier

ist, dass Sie dies benötigen ...

<select> 
    <option value="A">A</option> 
    <option disabled value="B">B</option> 
    <option value="C">C</option> 
    <option disabled value="D">D</option> 
    <option value="E">E</option> 
    <option value="F">F</option> 
    <option value="G">G</option> 
    <option value="H">H</option> 
    <option value="I">I</option> 
</select>

der Sperrwert nicht wählen machbar.

wenn Sie hier gehen verstecken wollen ..

http://jsbin.com/anoci

Quelle

2013-10-09 11:59:08 Arun

Die Eigenschaft Display:none nicht funktionieren auf dem Tag Optionen so haben Sie nur zwei Möglichkeiten, wie Arbeit um

1. Either disable then with disabled="disabled". 
2. Remove the options you don't want to see and insert them again when needed.

können Sie in der Lage sein, einige andere Arbeit zu finden, aber ich glaube nicht, dass es in allen Browsern konsistent sein wird

Quelle

2013-10-09 11:59:24 Rex

display: none funktioniert nicht für die Option

Antwort

Verwandte Themen