MVC - JavaScript to get data object from DropDownList

Question

I have a View page which contains a dropdownlist of values populated from a custom constructor class.

The DDL is populated with a SelectList created from a list of custom items as follows:

public class CustomerType
{
  public int Id { get; set; }
  public string Name { get; set; }
  public string ValidationRule { get; set; }
}

In my View I then set this as so: @Html.DropDownListFor(model => model.Id, (IEnumerable) Model.SelectListOfCustomItems, "Please select...")

What I want to try and do is display the ValidationRule property for each item selected, and show this in a Label.

I figure I have to use JavaScript to do this, but I'm unsure how to actually get that ValidationRule property? I could probably get the selected item using code similar to the below, but I can't see how to drill down to get other data?

var dropDown = document.getElementById("MyDropDownListName");
dropDown.onchange = function () { DisplayValidationRule(this); };
function DisplayValidationRule(ddl)
{
  document.getElementById('lblRule').textContent = [Unknown]
}

The bit I'm missing is where I've marked it [Unknown], as I don't have a club how to get this. I was thinking maybe something like ddl.items[ddl.selectedItem].value['ValidationRule'] but that doesn't work for me.

ytll21 · Accepted Answer · 2014-01-17 16:56:37Z

1

There are many ways to implement it. One way is to generate a set of hidden input fields like id="_CustomerType_id_xxx" with value "ValidationRule", then according to the select result to take the value. Another way is to send ajax request to get the rule. But I think it's not a good way.

Update

OK, below is my full codes, it passed on MVC4.

HomeController

public class HomeController : Controller
{
    public ActionResult Index()
    {
        IList<CustomerType> customerTypes = new List<CustomerType>();
        customerTypes.Add(new CustomerType { Id = 1, Name = "Customer Type 1", ValidationRule = "Rule 1" });
        customerTypes.Add(new CustomerType { Id = 2, Name = "Customer Type 2", ValidationRule = "Rule 2" });
        customerTypes.Add(new CustomerType { Id = 3, Name = "Customer Type 3", ValidationRule = "Rule 3" });

        IEnumerable<SelectListItem> selectList =
            from c in customerTypes
            select new SelectListItem
            {
                Text = c.Name,
                Value = c.Id.ToString()
            };

        return View(new CustomerVO { SelectListOfCustomItems = selectList, CustomerTypes = customerTypes });
    }
}

Index.cshtml

@model MvcApplication1.Models.CustomerVO

@Html.DropDownListFor(model => model.CustomerTypeId, Model.SelectListOfCustomItems, "Please select...")

@foreach (var customerType in Model.CustomerTypes)
{
    <input type="hidden" id="[email protected]" value="@customerType.ValidationRule" />
}

<label id="lblRule"></label>

@section scripts
{
<script>
    $(document).ready(function () {
        var dropDown = document.getElementById("CustomerTypeId");
        dropDown.onchange = function () { DisplayValidationRule(this); };
        function DisplayValidationRule(ddl)
        {
            document.getElementById('lblRule').textContent = $("#_customerType_" + ddl.value).val();
        }
    });
</script>
}

edited Jan 17, 2014 at 16:56

answered Jan 17, 2014 at 9:37

ytll21

8507 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MattR Over a year ago

Do you have any examples of the first option?

MattR Over a year ago

I had to do a little tinkering, but I managed to get this working. Many thanks for your help.

Collectives™ on Stack Overflow

MVC - JavaScript to get data object from DropDownList

1 Answer 1

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related