0

How to keep only the select option remain visible in a dropdown menu. 

<select name="month" id="my_month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03" selected="selected">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">Septembar</option>
<option value="10">Octobor</option><option value="11">Novembar</option>
<option value="12">Decembar</option>    
 </select>

From the dropdown, I wish to keep only 'select' part visible. Possible with CSS?

Thanks

kalyan
  • 299
  • 3
  • 5
  • 14
  • Do you mean you want to see "Month" rather than a dropdown with "March" pre-selected in this example? http://jsfiddle.net/4nYPa/ – Karl Kieninger Mar 15 '14 at 13:46
  • Yes, in the drop-down, I want to see only the month selected.. in this case it's march. If if place `#my_month { display: none;}`, the entire box disappears. But I wish to make the select March visible, does not matter if the entire drop-down functionality goes away – kalyan Mar 15 '14 at 13:50

2 Answers2

1

$("#my_month option").hide();

$("#my_month > option[selected==selected]").show();

karthick
  • 9
  • 1
  • 2
0

I think it should be possible with CSS, but my stab at it doesn't quite work in Chrome and not nearly in IE.

#my_month option { display: none;}
#my_month option[selected="selected"] { display: inline;}

This is a candidate for jQuery and there are at least a couple question that show some methods.

jquery-and-css-hide-show-select-options-with-a-certain-css-class

how-to-hide-a-option-in-a-select-menu-with-css

Community
  • 1
  • 1
Karl Kieninger
  • 8,841
  • 2
  • 33
  • 49
  • Thanks Karl. Yeap it's working, even in Chrome, but sadly not in IE. I just tested it. It's working on almost all popular browsers but not on IE. – kalyan Mar 15 '14 at 14:20