Conflicting between bootstrap selectpicker and bootstrap.js file

I found that bootstrap selectpicker does not work with bootstrap.js file. If bootstrap.js and selectpicker files are in same location listpicker does not open.

<select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
    <option selected="selected">Select department name</option>
    <option>Depart 1</option>
    <option>Depart 2</option>
    <option>Depart 3</option>
    <option>Depart 4</option>
    <option>Depart 5</option>
</select>

Fiddle Sample

https://jsfiddle.net/uscj19zL/3/

You're currently loading the following JavaScript files in the following order:

1. jQuery 2.1.0
2. Bootstrap 3.2.0
3. Bootstrap-Select 1.6.5
4. Bootstrap 3.3.4

The second call to a different version of bootstrap is what's causing issues. Get rid of it and you should be fine.

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$('.selectpicker').selectpicker({
    style: 'btn-default',
    size: 4
});

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.1/js/bootstrap-select.js"></script>

<select class="form-control deptId selectpicker" name="depId" placeholder="Department Name">
  <option selected="selected">Select department name</option>
  <option>Depart 1</option>
  <option>Depart 2</option>
  <option>Depart 3</option>
  <option>Depart 4</option>
  <option>Depart 5</option>
</select>

<!-- end snippet -->

Also, here's an updated Demo in Fiddle