How to change parent container of dropdown list in select2

Question

I have form, which contain a few selects. For the latter I used plugin select2.

In exemple below you can see, that pull-down menu of select situated in the root of document - in the body.

Can I change location of dropdown list and how to do this?

UPD: probably my question is not fairly accurate. I'm asking, how to put dropdown list in commun container with select block?

$(document).ready(function() {
  $(".js-example-basic-single").select2({
    minimumResultsForSearch: Infinity
  })
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<div class="wrapper">
  <select class="js-example-basic-single" style="width: 200px;">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>

Answer 1

I don´t know if is available on the select2 version you are using, but you can use this:

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Source https://select2.github.io/options.html#dropdownParent