Hide

Question

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.

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

select[readonly] option {
    display: none;
}

Rendering code:

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

This did not work for IE, please suggest me options to fix this.

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.

http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — RaV, May 12 '16 at 10:42
How about adding an disabled attribute set to true for select box. Something like this. — Santhosh Kumar, May 12 '16 at 10:52

score 0 · Answer 1 · answered May 12 '16 at 10:56

0

Try this

Remove the disabled and selected attribute using jquery like this

$("select option").prop("selected", false);
$("select").prop("disabled", false);

answered May 12 '16 at 10:56

Santhosh Kumar

1,672
1
16
26

Hide in IE using CSS

1 Answers1

Hide