multi-column drop-down list JavaScript control options

Dean Everhart 1,496 Reputation points
2023-04-21T09:59:36.1866667+00:00

What are my options in selecting a JavaScript control to create a multi-column drop-down list? Environment Net Core 6 / MVC / Visual Studio Community 2022 / Windows 11 (64 bit)

Example Code

I would like to display more than one column in a drop-down list. Presently a single column, "Heading" displays in the code below Controller

            ViewData["ReferenceID"] = new SelectList(_context.Reference, "Id", "Heading");

View

            <div class="form-group">
                <label asp-for="ReferenceID" class="control-label"></label>
                <select asp-for="ReferenceID" class ="form-control" asp-items="ViewBag.ReferenceID"></select>
            </div>
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,234 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,306 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,036 Reputation points Microsoft Vendor
    2023-04-28T06:35:25.01+00:00

    Hi @Dean Everhart

    If you put a calculated property, say including two different properties (e.g. "Heading" and "Chapter" propertes, it the place of the singular "Heading" property (picuted above), the pull down menu displays the contents of the two properties.

    To display multiple properties value in the select option, you can use the following methods:

    Without using third-party package/plugins:

    Use string builder to generate the select option text value based on the properties. for example:

                var itemlist = new List<SelectModel>()
                {
                    new SelectModel(){ Id=101, Heading="Head 1", Chapter = "C1"},
                    new SelectModel(){ Id=102, Heading="Head 2", Chapter = "C2"},
                    new SelectModel(){ Id=103, Heading="Head 3", Chapter = "C3"},
                    new SelectModel(){ Id=104, Heading="Head 4", Chapter = "C4"},
                    new SelectModel(){ Id=105, Heading="Head 5", Chapter = "C5"},
                };
                ViewData["ReferenceID"] = itemlist.Select(c => new SelectListItem() { Value=c.Id.ToString(), Text=$"{c.Heading} / {c.Chapter}" });
    

    Then in the view page, use the following code to bind the select element:

                <div class="form-group">
                    <label asp-for="ReferenceID" class="control-label"></label>
                    <select asp-for="ReferenceID" class="form-control" asp-items="ViewBag.ReferenceID"></select>
                    <span asp-validation-for="ReferenceID" class="text-danger"></span>
                </div>
    

    Using third-party package/plugins:

    such as select2 plugin:

    The controller: directly return the model, instead of SelectListItem.

                var itemlist = new List<SelectModel>()
                {
                    new SelectModel(){ Id=101, Heading="Head 1", Chapter = "C1"},
                    new SelectModel(){ Id=102, Heading="Head 2", Chapter = "C2"},
                    new SelectModel(){ Id=103, Heading="Head 3", Chapter = "C3"},
                    new SelectModel(){ Id=104, Heading="Head 4", Chapter = "C4"},
                    new SelectModel(){ Id=105, Heading="Head 5", Chapter = "C5"},
                }; 
                ViewBag.ItemList = itemlist;
    

    The view page: use the following code to add the select options:

                <div>
                    <label class="control-label"></label>
                    <select id="selectheading"name ="selectedID"  >
                        @foreach (var item in (List<SelectModel>)ViewBag.ItemList)
                        {
                            <option value="@item.Id" data-chapter="@item.Chapter"> @item.Heading</option>
                        }
    
                    </select> 
                </div>
    

    And add the following scripts:

    @section Scripts {
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css" rel="stylesheet" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
        <script>
                function formatResultMulti(data) {
                    var chapter = $(data.element).data('chapter');
                    var classAttr = $(data.element).attr('class');
                    var hasClass = typeof classAttr != 'undefined';
                    classAttr = hasClass ? ' ' + classAttr : '';
    
                    var $result = $(
                        '<div class="row">' +
                        '<div class="col-md-6 col-xs-6' + classAttr + '">' + data.text + '</div>' +
                        '<div class="col-md-6 col-xs-6' + classAttr + '">' + chapter + '</div>' +
                        '</div>'
                    );
                    return $result;
                }
    
                $(function () {
                    $('#selectheading').select2({
                        width: '100%',
                        formatResult: formatResultMulti
                    });
                })
        </script>
    }
    
    

    The result as below:

    image2


    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

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful