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:)

Answer 1

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