CODEWITHSUNDEEP
javascripthtml
Alin
Alin

Reputation: 1228

Don't show default selected option in dropdown list

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 :

example

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

Upvotes: 2

Views: 13219

Answers (3)

sarita
sarita

Reputation: 1

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

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

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

Upvotes: 0

Ifeanyi Chukwu
Ifeanyi Chukwu

Reputation: 3317

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.com/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>

Upvotes: 1

Alin
Alin

Reputation: 1228

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>

Upvotes: 8

Related Questions