multiple drop downs where you can type in the value inside drop down

Question

I need to create multiple drop downs on the same page where user can type in the value in the drop down. I am able to accomplish typing the value inside the drop down based on this answer

I have this in my controller

public class HomeController:Controller

{

    private readonly ILogger<HomeController> _logger;

    public ApplicationDbContext _dbContext { get; set; }

    public HomeController(ILogger<HomeController> logger, ApplicationDbContext applicationnDbContext)

    {

        _logger = logger;

        _dbContext=applicationnDbContext;

    }



    public IActionResult CustomIndex()

    {

        SelectList customers = new SelectList(_dbContext.Customers.ToList(), "CustomerId", "Name");

        ViewBag.Select = customers;

        return View(); 

    }

    [HttpPost]

    public IActionResult CustomIndex(string Name)

    {


       

        return View();

    }

This is in the view:

@model TestMVC.Models.Customer

@{

ViewData["Title"] = "CustomIndex";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h1>CustomIndex</h1>

<form method="post" asp-controller="Home" asp-action="CustomIndex">

    <select id="ddlCustomers" name="Name" asp-items="ViewBag.Select">

        <option value="0">--Select Customer--</option>

    </select>

    <br />

    <br />

    <input type="submit" value="Submit" /> 

</form>

 $(function () {

            $("#ddlCustomers").select2({

                tags: true,

                createTag: function (params) {

                    return {

                        id: params.term,

                        text: params.term,

                        newOption: true

                    }

                },

                templateResult: function (data) {

                    var $result = $("<span></span>");

                    $result.text(data.text);

                    if (data.newOption) {

                        $result.append(" <em>(new)</em>");

                    }

                    return $result;

                }

            });

        });

With the above code, I was only able to make one drop down where I can type in the value. I want to make multiple drop down on the same page where users can type in the value inside the drop down. How can I accomplish this.

multiple drop downs where you can type in the value inside drop down

Answer 1

To create multiple drop-downs where the user can type in the value, you can create multiple select elements and apply the same Select2 logic to all of them. In this example, I'll create two drop-downs with the same behavior.

1. First, update your view to include multiple select elements:

@model TestMVC.Models.Customer

@{

    ViewData["Title"] = "CustomIndex";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h1>CustomIndex</h1>

<form method="post" asp-controller="Home" asp-action="CustomIndex">

    <select id="ddlCustomers1" name="Name1" asp-items="ViewBag.Select">

        <option value="0">--Select Customer 1--</option>

    </select>

    <br />

    <br />

    <select id="ddlCustomers2" name="Name2" asp-items="ViewBag.Select">

        <option value="0">--Select Customer 2--</option>

    </select>

    <br />

    <br />

    <input type="submit" value="Submit" />

</form>

2. Next, update the JavaScript code to apply Select2 to both drop-downs. You can use a class or loop through all the elements with a specific id pattern. In this example, I'll use a class called ddlCustomers.

<script>

    $(function () {

        $(".ddlCustomers").select2({

            tags: true,

            createTag: function (params) {

                return {

                    id: params.term,

                    text: params.term,

                    newOption: true

                }

            },

            templateResult: function (data) {

                var $result = $("<span></span>");

                $result.text(data.text);

                if (data.newOption) {

                    $result.append(" <em>(new)</em>");

                }

                return $result;

            }

        });

    });

</script>

3. Add the ddlCustomers class to both select elements in the view:

<select id="ddlCustomers1" name="Name1" class="ddlCustomers" asp-items="ViewBag.Select">

    <option value="0">--Select Customer 1--</option>

</select>

...

<select id="ddlCustomers2" name="Name2" class="ddlCustomers" asp-items="ViewBag.Select">

    <option value="0">--Select Customer 2--</option>

</select>

Now you have two drop-downs on the same page where users can type in the value inside the drop-down. You can create more drop-downs by adding more select elements with the ddlCustomers class and updating the name attribute accordingly.

Answer 2

Hi @Anjali Agarwal,

From the code you provided, It can only create one new option in dropdown list, If you type the second the option, It will overwrite the previous one. So do you want user can type multiple options in drop down list? If it is, You can change your JavaScript code like:

$(function () {
            $("#ddlCustomers").select2({
                tags: true
            }).on('change', (event) => {
                var value = $("#ddlCustomers").select2('data').map((element) => element.text);
                if (value.length > 0) {
                    //$("#ddlCustomers").append("<option>"+value+"</option>");
                    var newOption = new Option(value, value, true, true);
                    // Append it to the select
                    $('#ddlCustomers').append(newOption);
                }
            });
        });

GIF Demo

---

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,

Xinran Shen

======Update=======

If you just want to create multiple dropdown lists in your page, You just need to give them different names, Please refer to this:

<form method="post" asp-controller="Home" asp-action="CustomIndex">
    <select id="ddlCustomers" name="Name" asp-items="ViewBag.Select">
        <option value="0">--Select Customer--</option>
    </select>
    <br />
    <select id="ddlCustomers1" name="Name1" asp-items="ViewBag.Select">
        <option value="0">--Select Customer--</option>
    </select>
    <br />
    <br />
    <input type="submit" value="Submit" />
</form>

$(function () {
            $("#ddlCustomers").select2({
                tags: true,
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    }
                },
                templateResult: function (data) {
                    var $result = $("<span></span>");

                    $result.text(data.text);

                    if (data.newOption) {
                        $result.append(" <em>(new)</em>");
                    }

                    return $result;
                }
            });

            $("#ddlCustomers1").select2({
                tags: true,
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    }
                },
                templateResult: function (data) {
                    var $result = $("<span></span>");

                    $result.text(data.text);

                    if (data.newOption) {
                        $result.append(" <em>(new)</em>");
                    }

                    return $result;
                }
            });
        });

Then in backend, use the Names of select tag as the parameters in action:

[HttpPost]
        public IActionResult CustomIndex(string Name,string Name1)
        {
            return View();
        }

Demo