Set DropDownList selected value using jQuery in ASP.Net MVC

Last Reply 20 days ago By dharmendr

Posted 21 days 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; }

 

You are viewing reply posted by: dharmendr 20 days ago.
Posted 20 days ago Modified on 20 days 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