Design a site like this with
Get started

Dropdown not getting bind using .val() and giving value in alert as null.

Nooper posted this problem and since we are not familiar with the context in which she is facing the problem we can give generic solutions to what we understand from the problem description:

If you want to show the selected value in alert box, you can do it like this:

   alert($("#ddlGender option:selected").val());

This will show the selected gender in textbox.

If you have a list of values retrieved from any source such as DB you can bind the whole list like this in the view

In JQuery

  var colordropdown = $("#ddlcolor");
                        colordropdown.append("<option>" + "Select Color" + "</option>");

                        for (var i = 0; i < result.length; i++) {
                            colordropdown.append("<option value=" + result[i].Id + ">" + result[i].ColorName + "</option>");

In html

<div class="col-sm-4 tb-font">
@Html.Label("Color", "Color Name", new { style = "width:140px; margin-bottom:5px; margin-top:5px; float: left;" })
<select id="ddlcolor" name="ColorName" class="form-control dropdown"></select>

If you want to manually assign the values to a dropdown, you can do like this:

<select name="abc" id="def">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>

If the problem is not one of those mentioned above. please explain the context or share the piece of problematic code so we may suggest the solution accordingly.

Happy Coding 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at

Up ↑

%d bloggers like this: