Set DropDownList selected value using jQuery in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 2 months ago

I have a drop down with select where i can set the default value for that drop down which was done and next time when user lands on that page i need to display that saved drop down

            $.ajax({
                type: "GET",
                url: webAPIURL + '/GetLoggedinuserId?MemberId=' + UserId,
                dataType: "json",
                async: true,
                cache: false,
                traditional: true,
                contentType: "application/json; charset=utf-8",
                success: function (data) {   //getting all the data from controller 
                    if (data.length > 0) {  //since length will be greater than 0 it satisfies if conditon
                        $.each(data.d, function () {
                            $("#ddlValue").append($("<option/>").val(this.KeyName).text(this.ValueName));  //unable to bind selected value to drop down
                        });
                    }
                }
            });

 

ID	DDL_TYPE    SELECTED
1	value1	     true  //should bind value 1 to drop down using jquery since this is saved against the user
2	value2       false
3	value3	     false

This is the html for drop down population

<select id="ddlValue" onchange="OnChange()" style="height: 25px;padding: 2px 12px;font-size: 12px;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;width:15%;" class="ItemPT5">
    <option value="0">All</option>
    <option value="2">Value1</option>
    <option value="1">Value2</option>
    <option value="3">Value3</option>
</select>
<input type="checkbox" id="chkdefault" title="Set As Default"/>

I need to get that saved value and bind to drop down when user comes again to that page suppose if i have selected value1 2 will be saved in database and only that 2 will be returned to me when user logins then i need to bind value2 for that drop down.

        public List<model> GetId(int Id)
        {
            esParameters EsPm = new esParameters();
            try
            {
                List<model> list = new List<model>();

                EsPm.Add(new esParameter("ID", Id));
                DataTable dt = EsPm.FillDataTable("USP_GET");
                if (!dt.HasErrors)
                {
                    foreach (DataRow dr in dt.Rows)
                    {
                        list.Add(new model()
                        {
                            Id = Convert.ToInt32(dr["ID"]),
                        });
                    }
                }
                return list;
            }
           catch (Exception ex) { 
                 ex.LogException();  
                 return null;
             }
        }

[DataMember]
public Int32? Id { get; set; }

 

Posted 2 months ago Modified on 2 months ago

Hi kavithav,

Check this example. Now please take its reference and correct your code.

Controller 

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult PopulateDropDownList()
    {
        // Bind record from database.
        List<model> items = new List<model>();
        items.Add(new model { Id = 2 });
        return Json(items, JsonRequestBehavior.AllowGet);
    }

    public class model
    {
        public Int32? Id { get; set; }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "GET",
                url: "Home/PopulateDropDownList",
                dataType: "json",
                async: true,
                cache: false,
                traditional: true,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.length > 0) {
                        $.each($("#ddlValue").find('option'), function () {
                            if ($(this).val() == data[0].Id) {
                                $(this).attr('selected', 'selected');
                                return false;
                            }
                        });
                    }
                }
            });
        });
    </script>
</head>
<body>
    <select id="ddlValue" style="height: 25px; width: 15%;">
        <option value="0">All</option>
        <option value="2">Value1</option>
        <option value="1">Value2</option>
        <option value="3">Value3</option>
    </select>
</body>
</html>

Screenshot