Question

Dont yell duplicate just yet.
I can’t find an answer for this anywhere.

I’m writing a little plugin for my web app and I want all the select boxes to have a disabled default option: <option disabled='disabled'>-Select-</option>.

That would be easy to do, except the user can come back in and edit their information. So i need to check if the select has a value selected:

 if ($this.val()) {
                            ...
                        } else {
                            $this.prepend("<option disabled='disabled' class='disabled'>-Select-</option>")[0].selectedIndex = 0;
                        }

I have attempted other solutions, that is just an example.

Edit: The idea is that the first time they come in or if they haven’t previously selected it will be defaulted to that disabled select option

A problem arises where the browser sets a default option itself (the first one). Then the $this.val() has a value, when in fact the user has not selected a value.

So the question is:
How do you place a default option into a select that can still retain a previously selected value using jquery?

Answer 1

So what i am doing now is making my own HTML helper for dropdownlistfor.

It inserts the user’s database value into the select tag and then javascript gets it from there.

HtmlHelper

public static class MvcHtmlExtensions
{
    public static MvcHtmlString DropDownListFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TValue>> expression, IEnumerable<SelectListItem> selectList,
        object htmlAttributes, bool userSelection)
    {
        if (userSelection == true)
        {
            object additionalAttributes = new { userSelection = expression.};

            var newHtmlAttributes = new RouteValueDictionary(htmlAttributes);
            foreach (var item in new RouteValueDictionary(additionalAttributes))
            {
                newHtmlAttributes[item.Key] = item.Value;
            }

            return Html.SelectExtensions.DropDownListFor(htmlHelper, expression, selectList, newHtmlAttributes);
        }
        else
        {
            return Html.SelectExtensions.DropDownListFor(htmlHelper, expression, selectList, htmlAttributes);
        }
    }
}

Javascript:

var $selectTemplate = $("<option disabled='disabled' class='disabled'>-Select-</option>");
            $this.prepend($selectTemplate);
            if ($this.filter("[userSelection]").attr("userSelection") > 0) {
                $this.val($this.attr("userSelection"));
            } else {
                $this[0].selectedIndex = 0;
            }