title: How to properly use bootstrap-select in a ASP MVC project
body: <p>i'm having a problem with bootstrap-select, the console says "undefined" on the .selectpicker(); The link is at the top of the View and the Script at the bottom, both next to the twitter bootstrap call (CSS and JS both via CDN).. It's a bundling problem? </p>
  
  <pre><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel=" stylesheet"/&gt;
  &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" rel="stylesheet" /&gt;'
  
  &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel=" stylesheet"/&gt;
  &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p><br /></p>
  
  <pre><code>&lt;select id="selectFile" class="form-control selectpicker" data-style="btn-success" required&gt;
     &lt;option selected="selected" disabled&gt;Select..&lt;/option&gt;
     &lt;option id="1"&gt;From File (Excel)&lt;/option&gt;
     &lt;option id="2"&gt;SQL DB (Contpaq)&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><br /></p>
  
  <pre><code>&lt;script src="~/Scripts/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><br /></p>
  
  <pre><code>$(document).ready(function () {
  
      $('.selectpicker').selectpicker();
  
      $('select.selectpicker').on('change', function () {
          var selected = $('.selectpicker option:selected').val();
          alert(selected);
      });
  });
  </code></pre>