selectonemenu onclick dropdown not disappearing

Question

This is the html code.

 <div class="leftalign selectBox-wrap ele-width-23 mrg-right-5">
                                     <select name="country" id="countryDiv" class="selectmenu">
                                          <option value="-1~-1"  selected="selected" >Country</option>
                                    </select>
                                 </div>

here we are appending values from js.

 var linkUrl
 ='http://'+hostname+'/uploadImage.php?command=GET_LOV_COUNTRY' ;   $.ajax({
         type: 'GET',
         url: linkUrl,
        dataType: 'json',
         beforeSend: function (xhr)
         {
        //xhr.setRequestHeader("X-Auth-Token", accessToken);
         },
         success: function(data){
         try{
            jQuery("#countryDiv").empty();
            var x=data;
            conSelect='<option value="-1~-1">Country</option>';
            x=data.country;
        for(i=0;i<x.length; i++)
         {
        var utilName= x[i].lov_value.trim();
            conSelect+='<option value="'+x[i].id+'~'+utilName+'">'+utilName+'</option>';
         }          //alert(conSelect);
         jQuery("#countryDiv").append(conSelect);
         }catch(e){
         }
         },
         error:function(data){
          },
        complete:function(data){
        }
         });    }

here on click of drop down, drop-down is not disappearing. onclick of twice it is disappearing