ASP.Net MVC make Html.DropDownList unselectable

Question

I would like display some Html.DropDownList controls in custom readonly mode. Control should be able to open underlaying popup but it shouldn't save values that selected by user. For example I have Html.DropDownList control with three values: Value 1 Value 2 Value 3

Selected item for control "Value 2"

User see combobox control with displayed item "Value 2". When user click on control popup with all three values should be opened (as for usual combobox control). In case user choose value different from "Value 2" selected value shouldn't be saved in control. So, when user click on item "Value 3" from underlying list, control should still display item "Value 2" as selected Is it possible in any way?

Thank you

Is it ok for you to make every `option` in the `select` element disabled? — Zabavsky, Dec 27 '12 at 13:26
Don't do that. Your selected value won't carry through during a POST, and will reset to the default value by the mvc model binder. Could cause side effects if you aren't re-fetching it during the POST action. — Graham, Dec 27 '12 at 15:29

score 3 · Answer 1 · answered Dec 27 '12 at 13:41

Ugh. As a user of your system, I will not like what you have created here! The first time I try to click on Value 3, and it pops back to Value 2 without any warning, I will assume that I mis-clicked, and I will immediately try again. Hopefully I will realize that you are re-setting that dropdown list, but I won't get it right away, and I'll be annoyed.

Here's a better UI choice: Disable the invalid OPTION tags so that I can see them in the dropdown, but I can't select them. Here's the jQuery for it:

$(function () {
     $("#select[name=test] option").not(":selected").attr("disabled", true);
});

I learned from an experienced programmer (not even a 'real' design guy), that the biggest sin of UI design is allowing the user to select an invalid option. Do everything in your power to avoid have to 'correct' what the user picked. By allowing them to select an invalid option, and then un-doing it instantly with JavaScript without any user feedback, you are violating this guideline.

score 1 · Accepted Answer · edited May 23 '17 at 10:24

1

If you are ok. with using jQuery. This should work for you.

(function () {
    var previous;
    // Grab the initial value in focus event.
    $("select[name=test]").focus(function () {
        previous = this.value;
    // On change event, use previous to set the value of dropdown.
    }).change(function() {
        $("select[name=test]").val(previous);
    });
})();

Here is the working example.

Inspired by another StackOverflow answer.

edited May 23 '17 at 10:24

Community

1
1

answered Dec 27 '12 at 13:18

emre nevayeshirazi

17,877
11
57
77

Good JS, but bad UI (see my answer below). If you must do this, at least add in something like "alert('Error: You cannot change this option at this time because [explanation goes here]')" at the end of the 'change()' function. – Graham Dec 27 '12 at 13:43

ASP.Net MVC make Html.DropDownList unselectable

2 Answers2