MVC3: Get Drop down menu selected value/text via Javascript

Question

On MVC3, with a dropdownlist defined as

@Html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"))

How can I get the selected value and/or text via javascript?

I tried passing a name:

  @Html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"), new {name="name")

and reading the name from the javascript: document.getElementByName("name")

but that does not work.

Community · Accepted Answer · 2017-05-23 11:44:22Z

4

If you are using jQuery (which is highly likely with an MVC project):

// lambda to get the ID of your dropdown. This runs on the server,
// and injects the ID into a client-side variable.
var id = '@Html.IdFor( o => o.model )';

// get the dropdown by ID and wrap in a jQuery object for easy manipulation
var dropdown = $("#" + id);

// get the value
var value = dropdown.val();

Of course, you could combine this into a single line if desired.

If you aren't using jQuery, see https://stackoverflow.com/a/1085810/453277.

var id = '@Html.IdFor( o => o.model )';
var dropdown = document.getElementById( id );
var value = dropdown.options[dropdown.selectedIndex].value;

Manual ID:

@Html.dropDownList(m=>m.model, new SelectList(m.myList, "value", "text"), new {id = "ddl1"})

var value = $("#ddl1").val();

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 12, 2012 at 14:56

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

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

4 Comments

jpo Over a year ago

I have a couple of dropdownmenu on my view. How will I differentiate between them in the script?

Tim M. Over a year ago

You should use an ID to differentiate. Usually you can automatically obtain this from Html.IdFor() but you can also manually add an ID. I'll add an example.

jpo Over a year ago

Thanks alot. That worked. To get the selected value, i did var value = $("#ddl1 option:selected").val();

IyaTaisho Over a year ago

Just var value = $("#ddl1").val() will get the currently selected item. No need to add option:selected.

Collectives™ on Stack Overflow

MVC3: Get Drop down menu selected value/text via Javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related