How to set multiple selected value and show them in dropdownlist with MVC?

Question

my .cshtml

  
        Members  
                
                       @Html.DropDownListFor(x => x.members, Model.memberList, new { @id="Members", @class= "select2 form-select",  multiple =   
                               "multiple", tabindex="3" });

.js

$(window).on('load', function() {

        $("#Members").select2();  

});

Class

  public long[] members { get; set; }  
  public SelectList memberList { get; set; } = Load_Members()

LoadMembers();

 while (dr.Read())  
  {  
        list.Add(new SelectListItem() { Value = dr.GetInt64(dr.GetOrdinal("pid")).ToString(), Text = dr.GetString(dr.GetOrdinal("member_name")) });  
   }

Answer

The proper way is to initial the members array with the desired values. When the select tag helpers builds the options array, if the option values is in members it will select it.

Answer

Hi @Dondon510 ,

In the class, you can add a string type property to store the selected members with the delimiter, like this:

    public class Select2Model  
    {  
        public long[] members { get; set; }  

        public string selectedmembers { get; set; } //used to store the selected members, such as: "tom,johnn,david"  
        public SelectList memberList { get; set; } = Load_Members();  

        public static SelectList Load_Members()  
        {  
            List list = new List()  
            {  
                new SelectListItem(){ Value="tom", Text="Tom"},  
                 new SelectListItem(){ Value="jack", Text="Jack"},  
                  new SelectListItem(){ Value="johnn", Text="Johnn"},  
                   new SelectListItem(){ Value="vivian", Text="Vivian"},  
                    new SelectListItem(){ Value="david", Text="David"},  
            };  


            return new SelectList(list,"Value","Text");  
        }  
    }

Then, in the view page(.cshtml), use a hidden field to store the selectedmembers :

          
    @Html.DropDownListFor(x => x.members, Model.memberList, new { @id="Members", @class= "select2 form-select",  multiple =   
            "multiple", tabindex="3" })

After that using the following scripts to set the default selected value: 228481-javascipts.txt

In the controller:

    public IActionResult Select2Index()  
    {  
        var select2model = new Select2Model();  
        select2model.selectedmembers = "tom,johnn,david"; //set the default selected members  
        return View(select2model);  
    }

Finally, the result is like this:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer

How to set multiple selected value and show them in dropdownlist with MVC?

I suggest that you use the MultiSelectList. Shown below is sample:

Model

Note that the MultiSelectList is used.

public class MultiCategoryViewModel  
{  
    public int[] Category { get; set; }  
   
    public MultiSelectList Categories { get; set; }  
}

Controller / Action Method

public async Task Edit3()  
{  
    int[] selected = new int[] { 1, 3, 5 };  
    var categoryList = await _context.Categories.ToListAsync();  
   
    ViewBag.CategoryId = new MultiSelectList(categoryList,  
                                             "CategoryId",  
                                             "CategoryName",  
                                             selected);  
   
    var model = new MultiCategoryViewModel  
    {  
        Category = selected,  
        Categories = new MultiSelectList(categoryList,  
                                         "CategoryId",  
                                         "CategoryName")  
    };  
   
    return View(model);  
}  
   
[HttpPost]  
[ValidateAntiForgeryToken]  
public IActionResult Edit3(int[] categoryid,   
                           int[] categoryid2,   
                           int[] category)  
{  
    if (ModelState.IsValid)  
    {  
        return RedirectToAction("Index");  
    }  
   
    return View();  
}

View

@model MvcCore5App.Controllers.MultiCategoryViewModel  
   
@{  
    ViewData["Title"] = "Edit3";  
    Layout = "~/Views/Shared/_Layout.cshtml";  
}  
   
Edit3  
   
  
      
          
              
                  
                    @@Html.DropDownList 利用  
                  
                @Html.DropDownList("CategoryId", null,  
                    htmlAttributes: new  
                    {  
                        @class = "form-control",  
                        multiple = "multiple"  
                    })  
              
              
                  
                    タグヘルパー <select> + ViewBag 利用  
                  
                  
              
              
                  
                    タグヘルパー <select> + Model 利用

Result:

How to set multiple selected value and show them in dropdownlist with MVC?

3 answers