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=".0.3/css/select2.min.css" rel="stylesheet" />
<script src=".1.1/jquery.min.js"></script>
<script src=".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>

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>

• javascript
• jquery
• html
• css
• jquery-select2

3 Answers 3

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

This would work

$("#selectInput").select2({ dropdownParent: "#modal-container" });

Please note that this would work on select2 version 4.0.2. For higher versions see other answers.

Reference: https://github.com/select2/select2-bootstrap-theme/issues/41

The location of your dropdown list is determined by your HTML and CSS layout. It depends on where you put the div in your example and how it is styled. See my example below which shows the dropdown list moved to the right of a yellow box.

$(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 style="width:100%;height:100%;position:relative;">
<div style="height:100px;width:100px;background-color:yellow;float:left;"></div>
<div style="float:left;" class="wrapper">
  <select class="js-example-basic-single" style="width: 200px;">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
</div>