Is there a way to not show the first option inside the dropdown list of a HTML select tag? They only thing I know of is to disable it from being clicked but I want it to not be shown inside the dropdown, like this :

<select class="archive" onChange="window.location.href=this.value">
    <option disabled="disabled" selected="selected">..după lună:</option>
    <option value="#">Ianuarie 2015</option>
    <option value="#">Februarie 2015</option>
    <option value="#">Martie 2015</option>
    <option value="#">Aprilie 2015</option>
</select>

Is there a way to not show the first option inside the dropdown list of a HTML select tag? They only thing I know of is to disable it from being clicked but I want it to not be shown inside the dropdown, like this :

<select class="archive" onChange="window.location.href=this.value">
    <option disabled="disabled" selected="selected">..după lună:</option>
    <option value="#">Ianuarie 2015</option>
    <option value="#">Februarie 2015</option>
    <option value="#">Martie 2015</option>
    <option value="#">Aprilie 2015</option>
</select>

• javascript
• html

• @Arvind , I have no limitations, I already use jquery in this website but can I achieve this using jquery? Considering that I only need to not show the first option inside the list but I need it to show up in the box, just like in the image I posted :) – Alin Commented May 4, 2015 at 8:32
• Did you tryed to set css visibility to "none"? – bitifet Commented May 4, 2015 at 8:36
• @bitifet I just answered my own question. Apparently adding style="display:none;" to the first option will not hide it from the box itself, just from the list. I did not think of this cause I thought it will automatically hide it from both the list and the box. – Alin Commented May 4, 2015 at 8:39
• You will find your answer in this post : stackoverflow./questions/3413188/… – Theasc721 Commented May 4, 2015 at 9:18

3 Answers 3

I did not think about trying CSS to achieve this cause I thought that by adding style="display:none;" to my first option tag will hide the value from the box too, but as it appears, it doesn't. You can achieve this by changing my initial code in the question with:

<select class="archive" onChange="window.location.href=this.value">
    <option disabled="disabled" selected="selected" style="display:none;">..lună:</option>
    <option value="#">Ianuarie 2015</option>
    <option value="#">Februarie 2015</option>
    <option value="#">Martie 2015</option>
    <option value="#">Aprilie 2015</option>
</select>

If i understood your question correctly, i believe what you are trying to do is this. Goodluck

$('.archive option:selected').hide(); //initialise

A much more dynamic approach for all selected elements is below:

$(function(){
   $('.archive option:selected').hide(); //initialise
  
   $('.archive').change(function(){
     
     $('.archive option').show(200, function(){
       
         $('.archive option:selected').hide();
       
     });
     
   });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="archive">
    <option selected="selected">..după lună:</option>
    <option value="#">Ianuarie 2015</option>
    <option value="#">Februarie 2015</option>
    <option value="#">Martie 2015</option>
    <option value="#">Aprilie 2015</option>
</select>

$(function(){
   $('.archive option:selected').hide(); //initialise
  
   $('.archive').change(function(){
     
     $('.archive option').show(200, function(){
       
         $('.archive option:selected').hide();
       
     });
     
   });
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="archive">
    <option selected="selected">..după lună:</option>
        </select>