Net Core - Select2 Set Selected Value

Question

I have an edit page with razor page. I want the selected values in the database in select2 to be selected in select2. For this reason, I am trying to loop selected values and make them selected for select2. But this administration is not working.

<div class="mb-3" data-select2-id="21">
                            <select asp-for="SelectedCities" asp-items="ViewBag.CityPrices as SelectList" id="selected-cities" class="multiple-select select2-hidden-accessible" data-placeholder="Şehir Seçiniz" multiple="" data-select2-id="21" tabindex="-1" aria-hidden="true"></select>
                        </div>

here is my script

<script>
$(document).ready(function () {

        @foreach (var packageCity in Model.PackageCities)
        {
           <text>
         $('#selected-cities').val('@packageCity.CityPrice.PriceId');
            $('#selected-cities').trigger('change');
            </text>
        }
  
</script>

No need to do it with JavaScript. Use MultiSelectList. Check How can I create a SelectList with multiple selected values? and Asp.net Core, set multiple selected values in Razor Page — Dimitris Maragkos
– Dimitris Maragkos, Commented Apr 6, 2023 at 10:02
this is not the solution for me. i have to do this with javascript for select2 — Pangomi IT
– Pangomi IT, Commented Apr 6, 2023 at 11:48

Dimitris Maragkos · Accepted Answer · 2023-04-06 12:25:12Z

Here is a simple example of how to set selected values in a select list:

Models:

public class Fruit
{
    public int FruitId { get; set; }
    public string Name { get; set; } = default!;
}

public class DemoViewModel
{
    public List<int> SelectedFruit { get; set; } = default!;
}

HomeController.cs:

[HttpGet]
public IActionResult Index()
{
    // all items that should be in your select list
    var fruitList = new List<Fruit>
    {
        new Fruit { FruitId = 1, Name = "Banana" },
        new Fruit { FruitId = 2, Name = "Orange" },
        new Fruit { FruitId = 3, Name = "Apple" },
        new Fruit { FruitId = 4, Name = "Kiwi" },
    };

    // get from database the ids of the items that should be selected
    var selectedFruit = new List<int> { 2, 3 };

    // create MultiSelectList
    ViewBag.FruitSelectList = new MultiSelectList
    (
        items: fruitList,
        dataValueField: nameof(Fruit.FruitId),
        dataTextField: nameof(Fruit.Name),
        selectedValues: selectedFruit
    );

    return View();
}

[HttpPost]
public IActionResult Index(DemoViewModel model)
{
    // save model.SelectedFruit to database
    return RedirectToAction("Index");
}

View:

@model DemoViewModel
@{
    ViewData["Title"] = "Home Page";
}

<form asp-controller="Home" asp-action="Index">
    <div class="mb-3">
        <select id="fruitSelect" class="form-control" asp-for="SelectedCities" asp-items="ViewBag.FruitSelectList"></select>
    </div>

    <button class="btn btn-primary">Submit</button>
</form>

@section Scripts {
    <script>
        $(document).ready(function () {
            $('#fruitSelect').select2();
        });
    </script>
}

And here is a simple demo project.

Collectives™ on Stack Overflow

Net Core - Select2 Set Selected Value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related