Select2 doesn't show options

Asked 25/10, 2017 at 8:36 Answered 30/10, 2023 at 8:21

javascript jquery ajax asp.net-mvc jquery-select2

I'm currently testing Select2.js in my ASP.NET MVC project.

The first test on a "normal" view just worked fine but now I'm trying to add this to a select box inside a partial view that gets loaded on Ajax Call and then displayed inside a <div> on the normal view page.

The code to generate the dropdown looks like this:

@Html.DropDownList("addRole",
   new SelectList(ViewBag.availableRoles, "Id", "Name"),
   "Rolle auswählen", 
   new { @name="addRole", @class = "form-control" }
)

And on the end of the partial view file I added the following:

$(document).ready(function () {
    //var data = [{ id: 1, text: "Test" }];

    $("#addRole").select2({
        //data: data
    });
});

It looks like it works because of the look of the select box changes but when I try to open it, it just shows nothing. Same happens when I uncomment the data variable code above.

It just doesn't show anything to me and I don't know why.

I've already tried to add the JavaScript code to $(document).ajaxComplete or in the success function from the AJAX call but it doesn't change anything.

Psychic answered 25/10, 2017 at 8:36 Comment(4)

Did you check if ViewBag.availableRoles contains valid values with fields Id and Name? – Tetter 25/10, 2017 at 8:42

That has nothing to do with select2 since it's not working without it too... – Bagwig 25/10, 2017 at 8:44

Yes, when I look into the DOM elements I see all entries. Also when I remove the $("#addRole").select2() it works fine. – Psychic 25/10, 2017 at 8:46

to whom it might interest (such as @atish-shakya), and completely off topic, this is the reason of so many edits: chat.stackoverflow.com/transcript/message/48255477#48255477 – Shortie 6/1, 2020 at 8:30

I got the answer now. The problem was not that the select2 element has no items, the problem was the given items did not show up. So I thought about why didn´t they show up and found out that I´m really stupid. It did show up, but I can´t see it because of the z-index. My popup window got a z-index of 20k so the dropdown list was behind the window.

So to solve this just add:

.select2-dropdown {
    z-index:99999;
}

Or add a dropdownCssClass to the select2 settings with the given z-index like this:

.select2-dropdown.increasezindex {
    z-index:99999;
}

JS:

$(document).ready(function () {
    $("#addRole").select2({
        dropdownCssClass:'increasezindex'
    });
});

Psychic answered 25/10, 2017 at 8:55 Comment(2)

glad you worked it out my mate – Ideation 10/1 at 7:44

I'm truly horrorized why this worked. I mean, come on, this an 2017 old issue, they should be fixed by now in their latest releases – Milinda 18/5 at 21:39

In my case, I was displaying a select2 on a pop-up element and this causes the dropdown to disappear because it is attached by default to the <body> element.

Select2 troubleshooting guide highlights a similar issue with Bootstrap modals.

To overcome this problem I had to use the dropdown placement option provided,

let $select = $('select'), 
  $parent = $select.parent();

$select.select2({
  dropdownParent: $parent
});

Sextet answered 31/3, 2021 at 15:7 Comment(0)

I found a solution here: Select2 does not function properly when I use it inside a Bootstrap modal

It says:

This will cause the dropdown to be attached to the modal, rather than the <body> (here modal is the element)

Oppression answered 30/10, 2023 at 8:21 Comment(0)

Recommended topics

Hot tags