Read all dropdown box values in JQuery

Question

I have a dropdown box in an MVC 4 view. When the value in the dropdown box changes I want to read all of the values selected. Each Selection contains 3 items. First: Id, Second: the value the user sees on the form and third: is a path to a file. Everything works fine but I cant read the TemplatePath. How do I use jquery to read the templatePath selected by the user.

I know how to read the id and the selected value, but I cant seem to find a way to read the path.

My controller creates a SelectList used in the view:

ViewBag.TemplateList = new SelectList(db.Templates.ToList(), "TemplateId", "TemplateTitle", "TemplatePath");

The view uses the select list and populates a dropdown box:

@Html.DropDownListFor(model => model.TemplateId, ViewBag.TemplateList as IEnumerable<SelectListItem>, "-- No Template --", new { @id = "TemplateChoice"})

I have a javascript file using Jquery so when the template dropdown box is changed, I want to read the TemplatePath from the dropdown box.

My javascript file is as follows:

$("document").ready(function () {

    $("#TemplateChoice").change(function () {
        var templateID = $("#TemplateChoice option:selected").val();
        var templateText = $("#TemplateChoice option:selected").text();

       //Here I need code that will read the TemplatePath
    });
 });

Any help would be appreciated.

The change event has a this reference to the control that is changed. Try $(this).val() to get the selected value. — Nick Zimmerman, Apr 25 '14 at 20:40

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

It looks like you're trying to store 3 values in a dropdown list, which by default only stores two values. You can add the path to each option in the list by using data attributes. Check out this answer for an example of setting and retrieving them.

edited May 23 '17 at 10:26

Community

1
1

answered Apr 25 '14 at 20:46

Dan S.

173
1
14

Oh, and if you're going to be constructing them with `Html.DropDownListFor` use underscores in place of hyphens for the names of your attribute, so `data_thingy` instead of `data-thingy`, it'll be replaced when rendering. – Dan S. Apr 25 '14 at 20:55

score 0 · Accepted Answer · answered Apr 25 '14 at 20:50

0

There is no 3rd value in the SelectList constructor. See docs

answered Apr 25 '14 at 20:50

TSK

71
3

A solution would be to use an `IEnumerable` of a custom class that inherits from `SelectListItem` and just add `TemplatePath` to it, then use a `data-` attribute on the options to store the template path. You should have no problem getting to them using jQuery. – Dan S. Apr 28 '14 at 14:04

score 0 · Answer 3 · answered Apr 25 '14 at 20:54

Your problem is here:

ViewBag.TemplateList = new SelectList(db.Templates.ToList(), "TemplateId", "TemplateTitle", "TemplatePath");

The forth parameter on the SelectList constructor is for the currently selected value. IE:

ViewBag.TemplateList = new SelectList(db.Templates.ToList(), "TemplateId", "TemplateTitle", db.Templates.First());

This would select the first item in the Templates list by default. This is not used for a property on the SelectListItems like you are specifying here. You could write an extension method that would specify an attached property to your select list items. But you will not be able to accomplish this using SelectList and DropDownListFor

Read all dropdown box values in JQuery

3 Answers3