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.empty();
                        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>
</div>                               

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>
</select>

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 🙂