title: ASP MVC Bootstrap - Select2 DropDownListFor Displays Duplicate Boxes
body: <p>I have an ASP.net MVC project.  All of my DropDownListFor's display as 2 boxes instead of 1.  This is what the view looks like currently:</p>
  
  <p><a href="https://i.stack.imgur.com/67wpR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/67wpR.png" alt="enter image description here"></a></p>
  
  <p>This is what the view SHOULD look like:</p>
  
  <p><a href="https://i.stack.imgur.com/hDH6W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hDH6W.png" alt="enter image description here"></a></p>
  
  <p>Here is the code from the view:</p>
  
  <pre><code>   &lt;div class="col-xs-12 col-sm-6 col-md-4 "&gt;
          &lt;div class="form-group select-280"&gt;
              @Html.LabelFor(model =&gt; model.HoleID)
              &lt;br /&gt;
              @Html.DropDownListFor(model =&gt; model.HoleID, (List&lt;SelectListItem&gt;)ViewData["HoleList"], new { @class = "form-control" })
              @Html.ValidationMessageFor(model =&gt; model.HoleID)
         &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Javascript from the view to make the DropDownListFor Searchable (Select2):</p>
  
  <pre><code>$(document).ready(function () {
  
      $("#HoleID").select2();
  
  }
  </code></pre>
  
  <hr>
  
  <p>Why are all of my DropDownListFor's displaying as duplicates, and how can I correct this bug?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Removing the <code>.select2()</code> fixes the bug and removes the duplicate dropdown... however that makes the remaining dropdown not searchable.  how can I fix this while still maintaining the search functionality?</p>