how to preselect a dropdown list value in jquery and controller

Question

User569149469 posted

Hi,

I have a code like this  and I want to select a value in the list and display as selected in the dropdown

 public JsonResult PopulateDropdown()
        {
           
            List<Location> locationList = Data.LocalDataStore.Location;
           if(locationList.Count>0)
            {
                Location selectedLocation = locationList.Find(s => s.LocationID == Data.GLOBAL_LOCATIONID);//need this location to be selected
            }
            ViewBag.Locations = locationList;
            return Json(locationList, JsonRequestBehavior.AllowGet);
        }

   function getDDldata() {

            $.ajax({
                url: "/GenericData/PopulateDropdown",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: JSON,
                success: function (result) {
                    $("#FromJson").find("option").remove();
                    $("#FromJson").select2({ multiple: true });
                    $(result).each(function () {

                        $("#FromJson").append($("<option></option>").val(this.LocationID).html(this.Description));
                        $("#FromJson").append($("<option></option>").val(99999).html("Global"));

                    });
                },
                error: function (data) { }
            });
        }

    @Html.DropDownList("FromJson", new MultiSelectList(Enumerable.Empty<SelectListItem>()), new { @class = "form-control" })

Answer 1

User-1171043462 posted

1. In your Location class add a BOOL property Selected.
2.  Set it to True for the Item you want to be selected.
3. In your jQuery check if Selected = True then select.

   if(this.Selected)
   {
   $("#FromJson").append($("<option selected = 'selected'></option>").val(this.LocationID).html(this.Description));
   }
   else
   {
   $("#FromJson").append($("<option></option>").val(this.LocationID).html(this.Description));
   }
   

Answer 2

User-369506445 posted

hi

you can use a SelectListItem and you can set default Selected for it

please change your action code to 

public JsonResult PopulateDropdown()
        {
            
            List<Location> locationList = Data.LocalDataStore.Location;
            var model = locationList.Select(a => new SelectListItem
            {
                Text = a.Description,
                Value = a.LocationID.ToString(),
                Selected = a.LocationID==Data.GLOBAL_LOCATIONID// if this be equls true , it'll selected with the drop down  
             }); 
             
 ViewBag.Locations = locationList; 
             
 return Json(model, JsonRequestBehavior.AllowGet); 

}

and change your script to 

function getDDldata() {

        $.ajax({
            url: "/GenericData/PopulateDropdown",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: JSON,
            success: function (result) {
                $("#FromJson").find("option").remove();
                $("#FromJson").select2({ multiple: true });
                $(result).each(function () {
                    
                    if (this.Selected) {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    } else {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    }
                        
                    $("#FromJson").append($("<option></option>").val(99999).html("Global"));
                });
            },
            error: function (data) { }
        });
    }

Answer 3

User569149469 posted

   if (this.Selected) {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    } else {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    }

in both cases u r appending selected ???

Answer 4

User36583972 posted

Hi phmaspnet,

in both cases u r appending selected ???

I think vahid wants to express is: If Selected is true, select it, otherwise it will not be selected.

 $(result).each(function () {
                    
                    if (this.Selected) {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    } else {
                        $("#FromJson").append($("<option></option>").val(this.Value).html(this.Text));
                    }
                });

You can modify it and have a test.

Best Regards,

Yong Lu

Answer 5

User-369506445 posted

Hi phmaspnet

Yes you are right . I'm sorry it was my mistake in copy the code

Your correct code is

if (this.Selected) {
                        $("#FromJson").append($("<option selected = 'selected'></option>").val(this.Value).html(this.Text));
                    } else {
                        $("#FromJson").append($("<option></option>").val(this.Value).html(this.Text));
                    }

Answer 6

User-1171043462 posted

Have you tried my code?

Answer 7

User569149469 posted

yes  thanks for the answer

Have you tried my code?