locked
how to preselect a dropdown list value in jquery and controller RRS feed

  • 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" })
    

    Tuesday, July 17, 2018 7:15 AM

Answers

  • 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));
      }
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2018 8:46 AM
  • 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) { }
            });
        }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2018 9:22 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 19, 2018 7:15 AM

All replies

  • 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));
      }
      
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2018 8:46 AM
  • 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) { }
            });
        }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2018 9:22 AM
  • 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 ???

    Thursday, July 19, 2018 12:19 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 19, 2018 7:15 AM
  • 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));
                        }

    Thursday, July 19, 2018 12:08 PM
  • User-1171043462 posted

    Have you tried my code?

    Thursday, July 19, 2018 5:38 PM
  • User569149469 posted

    yes  thanks for the answer

    Have you tried my code?

    Friday, July 20, 2018 2:03 AM