Select2.js two select box appear

Question

I'm trying to implement select2.js in my project, but, when using an example from their page, two select boxes appear. I'm using bootstrap and the last version of select2.

@section Scripts{
  @Scripts.Render("~/plugins/select2")
}

@section Styles{
  @Styles.Render("~/plugins/select2Styles")
}

<script type="text/javascript">
    $(document).ready(function () {
    //$("#selectStoreId").select2();
    $(".select2_demo_1").select2({
        placeholder: 'Select an option',
        dropdownParent: $(".select2_demo_1")
    });
});
</script>

<div class="row">
 <div class="col-md-4">
     <p>
         Select2 is a jQuery based replacement for select boxes. It can take 
       a regular select box and turn it into:
    </p>
    <select class="select2_demo_1 form-control">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
      </select>
  </div>
</div>

And I obtain: Two select boxes

I don't know what I'm doing wrong. Please help:)

Try to remove the form-control class from the select tag. To me, it worked. — Ana Carolina Manzan, Mar 06 '18 at 14:48

score 1 · Answer 1 · answered Aug 01 '18 at 17:32

1

I found the solution. I was not importing the correct css file structure.

answered Aug 01 '18 at 17:32

Sterling Diaz

3,789
2
31
35

score 0 · Answer 2 · edited Jan 06 '23 at 16:32

0

I added "select2-hidden-accessible" in the form class and it worked for me or you can add it in jquery to explicitly add the class to the select element.

$("select").addClass("select2-hidden-accessible");

edited Jan 06 '23 at 16:32

Fedor

17,146
13
40
131

answered Jan 06 '23 at 10:52

precoderz

75
6

Select2.js two select box appear

2 Answers2