Select2 doesn't work when embedded in a bootstrap modal

select2 dropdownparent
select2 not working
select2 example
select2 ajax
select2 not working in modal
select2 clear selection
select2 options
select2 doesn't show selected value

When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine.

Working example: http://jsfiddle.net/byJy8/1/ code:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

and js:

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

answers:

here you can find a quick fix

and here is 'the right way': Select2 doesn't work when embedded in a bootstrap modal

Ok, I've got it to work.

change

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

to

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

(remove tabindex="-1" from modal)

Select2 doesn't show selected value, You need to use the initSelection option to set the initial value. If you are using a pre-defined select element to create the select2, you can use  Here is how to make val in select2 just select the corresponding element. For some reason, select2 doesn't provide the function to look up selections by id. For some reason, select2 doesn't provide the function to look up selections by id.

For Select2 v4:

Use dropdownParent to attach the dropdown to the modal dialog, rather than the HTML body.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

This will attach the Select2 dropdown so it falls within the DOM of the modal rather than to the HTML body (the default). See https://select2.org/dropdown#dropdown-placement

Select2 doesn't work with multiple <select> with same id · Issue , Select2 doesn't convert multiple elements that share same id attribute (I know that id attribute must be unique). This used to work just fine in  Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

I found a solution to this on github for select2

https://github.com/ivaynberg/select2/issues/1436

For bootstrap 3, the solution is:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 renamed the enforceFocus method to _enforceFocus, so you'll need to patch that instead:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Explanation copied from link above:

Bootstrap registers a listener to the focusin event which checks whether the focused element is either the overlay itself or a descendent of it - if not it just refocuses on the overlay. With the select2 dropdown being attached to the body this effectively prevents you from entering anything into the the textfield.

You can quickfix this by overwriting the enforceFocus function which registers the event on the modal

select2-4.0.5 doesn't seem to work well with jquery-3.4.0 · Issue , Tried select2-4.0.5 with jquery-3.4.0 and started to encountered strange bug with focus logic. Especially multiselect widget was behaving very  select2 is not displaying the items in loading in IE (version 11). It is working fine in Chrome and Opera browsers.

Just remove tabindex="-1" and add style overflow:hidden

Here is an example:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

Select2 doesn't work on Meteor - help, Hey guys, I have been trying to get select2 to work on Meteor for quite some time, but still no success. I tried the NPM package, then I switched  I am trying to clone a row which contains select2 tool ,when i clone that row using jQuery the cloned select2 is not responding.In image given below first select2 which is original is working fine

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

This is my solution with select2 4.0.0. Just override the css right below the select2.css import. Please make sure the z-index is greater than your dialog or modal. I just add 2000 on the default ones. Cause my dialogs' z-index are about 1000.

Change Selected option in Select2 Dropdown with jQuery, In this element doesn't initialize select2. Completed Code. <!-- Use to Initialize select2 --> <select id='sel_users'> <option value=''>-- Select  using the disable or enable method with select2 doesn't change the disabled property of the element that it's replicating #850 Closed Zxurian opened this issue Feb 12, 2013 · 8 comments

Basic usage, Action-menu select2 doesn't work on selecting record(s) in a search list It throws an error Uncaught TypeError: Cannot read property 'apply' of  Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

Dropdown, Select2 JQuery Plugin. Select2 also supports multi-value select boxes. In multiple mode, select2 doesn't allow the same tag to be selected more than once. Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.

select2 doesn't load the options correctly, It uses select2 i know. But when i clear filter, dom refreshing with jquery. But select2 not reinit. So, it doesn't work after clearing filters. June 10  If load form, change selected item via select2 and later click input[type=reset] then reset selected option but select2 doesn't affect. sayap mentioned this issue Dec 5, 2012 Add more public api methods for programmatic control of select2.

Comments
  • That is, removing the attribute tabindex="-1" from the element.
  • dboswell's answer is the right solution, BUT, the dropdownParent should not be on the root div, but deeper, for example the div with class modal-content, otherwise the dropdown positions get messed up when scrolling the modal.
  • May be there another solution? Because modal window then won't close by Esc key.
  • removing tabindex="-1" didn't work form me. I've just changed <div class="modal-body"> to <div class="modal-body" style="overflow:hidden;">
  • How the hell you discovered that ?
  • I have tried all options , but nothing works for me. I am using select2 4.0
  • Thanks! It's been 4 years and it's still a valid fix.
  • Confirmed, this is working like a charm and seems to be the best solution to this problem!
  • This worked for me (with v4.0.2), but I had to use dropdownParent: $("#myModal"), not dropdownParent: "#myModal".
  • FWIW, in my case I needed to set the dropdownParent to the body of the modal, attaching it to the modal itself did not bring the z-index up high enough. e.g. dropdownParent: $('.modal-body', '#myModal')
  • This works perfectly fine without removing tabindex. +1