Is it possible to use Enum values rather than indexes in Javascript onChange function on a Select tag?

Question

I've got a select tag in my view that's populated with items from an enum in my class. I'm using the selected value to show/hide elements on my page. This was a set of radio buttons before but as the number of options grew, I wanted to put it in a nicer form control than a bunch of buttons. To test functionality I'm just trying to display the selected value before I re-implement the show/hide.

My model

    [Serializable]
    public class AddUser
    {
        [Required]
        [Display(Name = "User Type")]
        public UserTypes UserType { get; set; }

        public enum UserTypes
        {
            [Display(Name = "Standard")]                    Standard,
            [Display(Name = "Standard + Email")]            StandardAndEmail,
            [Display(Name = "Standard + Email + Phone")]    StandardAndEmailAndPhone,
            [Display(Name = "Email Only")]                  EmailOnly,
            [Display(Name = "Phone Only")]                  PhoneOnly
        }
}

Tag from view View

<select id="userType" class="form-control" asp-for="UserType" asp-items="Html.GetEnumSelectList<AddUser.UserTypes>()" onchange="userTypeSelect()">
    <option selected="selected" value="">Select</option>
</select>
<span asp-validation-for="UserType" class="text-danger"></span>

Javascript

<script type="text/javascript">
    function userTypeSelect() {
        var userType = document.getElementById("userType").value;
        console.log('User Type: ' + userType)
    }
</script>

Here is the resulting HTML

Desired result would be the rendered HTML options looking like this:

<option value="Standard">Standard</option>

Since I plan on using the value in Javascript, having access to the name rather than just an index would be ideal for code readability - especially since this isn't going to a database. I've been at this all morning trying to figure out how to get this to work.

Is this possible? If so, is it still better to just use the ID anyway?

It is possible, just more code. "Better" is a judgement call; only you can decide that. — Heretic Monkey, Mar 17 '20 at 17:10
Does this answer your question? [Enum String Name from Value](https://stackoverflow.com/questions/309333/enum-string-name-from-value) — rhys_stubbs, Mar 17 '20 at 17:12

score 1 · Accepted Answer · answered Mar 18 '20 at 07:04

It's a X|Y question since on server side you can get id from value or get value from id , so it's up to you to pass id or value to server side from front end . If you want to show <option value="Standard">Standard</option> you can write extension method like :

public static class ExtensionMethods
{
    public static IEnumerable<SelectListItem> GetEnumValueSelectList<TEnum>(this IHtmlHelper htmlHelper) where TEnum : struct
    {
        return new SelectList(Enum.GetValues(typeof(TEnum)).OfType<Enum>()
            .Select(x =>
                new SelectListItem
                {
                    Text = x.ToString(),
                    Value = x.ToString()
                }), "Value", "Text");
    }

}

And use like :

<select id="userType" class="form-control" asp-for="UserType" asp-items="Html.GetEnumValueSelectList<aspnetcorerepos.Controllers.HomeController.AddUser.UserTypes>()" >
    <option selected="selected" value="">Select</option>
</select>

But IMO it's more clear to identify 0/1 rather than Standard/StandardAndEmail on server side . But it's your choice to use id/value and you can decide the logic .

Is it possible to use Enum values rather than indexes in Javascript onChange function on a Select tag?

1 Answers1