jquery - Placeholder not working in select2 -

i working select2 select-box.

problem

placeholder not showing in select2. show first option selected in select2. it's automatically select first option want show placeholder instead of it.

my code:

script:

<script type="text/javascript">     $(document).ready(function () {        var data = $('#test_skill').select2({             placeholder: "please select skill",             allowclear: true        });     });  // have tried this: not working     $('#test_skill').select2({       placeholder: {         id: '-1', // value of option         text: 'please select skill'       }      }); </script> 

html:

<select class="skills_select2" required name="test_skill" id="test_skill">               <option value="1">test1</option>     <option value="2">test2</option>     <option value="3">test3</option>             </select> 

just put <option></option> in select on first place:

$(document).ready(function() {    $selectelement = $('#test_skill').select2({      placeholder: "please select skill",      allowclear: true    });  });

.skills_select2 {    width: 120px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" />  <select class="skills_select2" required name="test_skill" id="test_skill">         <option></option>      <option value="1">test1</option>      <option value="2">test2</option>      <option value="3">test3</option>              </select>