multi-column drop-down list JavaScript control options

Question

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>

Answer 1

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:

---

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