Jquery not appending options to select field from array -

hi have select box , using ajax append options it. first want delete existing options , append new options array. options not showing.

my select box:

<div class="btn-group">     <select class="selectpicker" id="open_po_number" name="open_po_number" data-style="btn-primary">     </select> </div> 

my ajax response:

var vendor_po_list = response.vendor_po_list; alert(vendor_po_list); $('#open_po_number').find('option').remove(); $.each(vendor_po_list, function(i, item){     $('#open_po_number').append($('<option>', {         value: vendor_po_list[i],         text: vendor_po_list[i]     })); }); 

i able see array in alert box values not appending select box. how this? want delete existing options first.

edit:
// console log

vendor_po_list = ["po-2", "po-3", "po-4", "po-5", "po-6", "po-7", "po-10", "po-11"] 

complete ajax:

$('[name="grn_vendor"]').on('change',function(){     var vndor_name = $(this).val();     if (vndor_name != 'none'){         $.ajax({             url : "/grn_qc/",             type : "post",             data : {action:'get_po_no',                     vndor_name:vndor_name},              success : function(response){                 var vendor_po_list = response.vendor_po_list;                 console.log(vendor_po_list);                 $('#open_po_number').empty();                 $.each(vendor_po_list, function(i, item) {                   $('#open_po_number').append($('<option>', {                     value: vendor_po_list[i],                     text: vendor_po_list[i]                   }));                 });             },              error : function(xhr,errmsg,err) {                 console.log(xhr.status + ": " + xhr.responsetext);             }            });     } }); 

instead can use .empty() method:

var vendor_po_list = ["po-2", "po-3", "po-4", "po-5", "po-6", "po-7", "po-10", "po-11"];    $('#open_po_number').empty();  $.each(vendor_po_list, function(i, item) {    $('#open_po_number').append($('<option>', {      value: vendor_po_list[i],      text: vendor_po_list[i]    }));  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select id="open_po_number">    <option>one</option>    <option>two</option>    <option>three</option>  </select>