Hide <option> in IE using CSS
<p>I am developing an ASP.net MVC application and jQuery, I want to store all state values in selection element and display it as readonly because I will auto select the correct state when user enters zipcode.</p>

<p>When user clicks on the select element I am hiding the options in Chrome as well as Firefox by using following CSS rule.</p>

<pre><code>select[readonly] option {
    display: none;
}
</code></pre>

<p><strong>Rendering code:</strong></p>

<pre><code>@Html.DropDownListFor(m =&gt; m.AddressView.StateCode, Model.AddressView.StateNameList, "Select", new
                     {
                         @class = "form-control ddl-state disabled-dropdown",
                         id = "ddlEmployerState",
                         @disabled = "disabled",
                         @readonly = "readonly",
                     })
</code></pre>

<p>This did not work for IE, please suggest me options to fix this.</p>

<p>A CSS fix is much appreciated since the value of the element changes dynamically and I don't want to call jQuery methods to hide and show values on the fly.</p>