2016-08-04 1 views
7

Ich habe eine <select> und möchte die erste Option unsichtbar sein, da es nicht genug Platz für den Text auf der mobilen Version und es wird abgehackt sowieso, so dass ich beschlossen, es einfach verschwinden zu lassen, aber es werde nicht arbeiten. Nur mit dem Rest der Optionen (auf PC-Browsern), aber nicht für den ersten. Warum das?Kann nicht die erste <option> unsichtbar

Dies ist, was ich bereits

CSS versucht haben:

option:first-child { 
    color: transparent; 
} 

HTML:

<select>  
    <option value="">Please select</option> 
    <option value="1">1</option>  
    <option value="2">2</option>  
    <option value="3">3</option>  
</select> 

Danke.

+2

Warum gehst du nicht einfach entfernen die Option "bitte auswählen"? Und schreibe es als Label vor die Auswahl. – lolesque

Antwort

4

option:first-child{ 
 
\t display: none; 
 
}
<select> 
 
\t <option disabled value>Please select</option> 
 
\t <option value="1">1</option>  
 
\t <option value="2">2</option>  
 
\t <option value="3">3</option>  
 
</select>

mit Hilfe von Javascript (beste)

(function(){ 
 
    document.getElementById("first").text = ""; 
 
})()
<select id="mySelect"> 
 
    <option value id="first">Please select</option> 
 
    <option value="1">1</option>  
 
    <option value="2">2</option>  
 
    <option value="3">3</option>  
 
</select>

, wenn Sie in der mobilen nur erste Option ausblenden möchten, dann folgen Sie diesem

(function(){ 
 
\t var window_width = $(window).width(); 
 
\t if(window_width < 480){ 
 
\t \t document.getElementById("first").text = ""; 
 
\t } 
 
})()
<select id="mySelect"> 
 
\t <option value id="first">Please select</option> 
 
\t <option value="1">1</option>  
 
\t <option value="2">2</option>  
 
\t <option value="3">3</option>  
 
</select> 
 
<p>This will hide only in mobile screen</p> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

+0

Ich habe das versucht, aber so lustig wie es klingt, es wird nicht an meinem Ende funktionieren. –

+0

hast du versucht mit! Wichtig am Ende alle anderen Stile zu überschreiben? – BakerStreet221

+0

Ja, aber scheint es ist ein PHP-Problem. Ich hatte dies versucht, bevor ich gefragt habe, aber da es nicht funktioniert hat, dachte ich, es wäre der falsche Weg. –

5

Sie können es auf display: none; gesetzt einzige Problem ist, wird es nicht in Internet Explorer arbeiten (Überraschung!)

Oder einfach nur die <option> leer lassen ...

2
jQuery.fn.toggleOption = function(show) { 
     jQuery(this).toggle(show); 
     if (show) { 
     if (jQuery(this).parent('span.toggleOption').length) 
     jQuery(this).unwrap(); 
     } else { 
      if (jQuery(this).parent('span.toggleOption').length == 0) 
       jQuery(this).wrap('<span class="toggleOption"  style="display:none;" />'); 
    } 
    }; 
+1

oder Sie können in die Option

+0

schreiben. Bearbeiten Sie Ihre Frage und fügen Sie den obigen Kommentar als Update hinzu. Ich werde auf diese Weise lesbarer und verständlicher sein. – Athafoud

5

Hier ist ein funktionierender Plünderer für Sie. Ändern Sie ihn auf display:none und fügen select an die CSS

ODER

Sie visibility: hidden; statt display:none in CSS verwenden können

select option:first-child { 
 
    display:none; 
 
}
<select> 
 
     <option value="">Please select</option> 
 
     <option value="1">1</option>  
 
     <option value="2">2</option>  
 
     <option value="3">3</option>  
 
     </select>

6

Ich glaube, Sie nicht wirklich müssen aus diesem Grund css hinzufügen. Wenn Sie auf die erste Option müssen leer sein, dann entfernen wählen Bitte .ie,

<select> 
    <option value=""></option> 
    <option value="1">1</option>  
    <option value="2">2</option>  
    <option value="3">3</option>  
</select> 

Wenn Sie etwas Abstand wollen dort in der Box sein wird, obwohl Text entfernt ist, können Sie nur   fügen Sie ein paar mal um das Panel breit genug zu machen wie unten gezeigt.

<select> 
    <option value="">&nbsp;&nbsp;&nbsp;&nbsp;</option> 
    <option value="1">1</option>  
    <option value="2">2</option>  
    <option value="3">3</option>  
</select> 
2

Sie können Medien Abfrage zu handhaben kleine Geräte und Telefone verwenden:

/* you can set any width you want */ 
@media (max-width: 400px) { 
    select option:first-child { 
    display: none; 
    } 
} 
0
<select> 
     <option style="display:none;">Please select</option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
     <option value="3">three</option> 
     <option value="4">four</option> 
    </select> 

Click to see Output screen

Danke ... :)