Untitled

<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <title></title>
</head>
<body>

<input type="submit" id="button" name="">

    <script type="text/javascript">
        var data = new Array();
        $(document).ready(function() {

            $(".js-example-basic-single").select2();

            data.push({id: 1, val: "lol"});
            data.push({id: 2, val: "ПИДОР"});
            data.push({id: 3, val: "УКРАИНА"});
        });

        function addToList(id, value){
            $('#list').html($('#list').html() + '<option value="'+value+'">'+value+'</option>');
        }

        $(document).on('click', '#button', function(){
            for(var i = 0; i< data.length; i++)
                addToList(data[i].id, data[i].val);
        });


    </script>

    <select style=" width:  100%;" id="list" class="js-example-basic-single">
      <option value="AL">Alabama</option>

      <option value="WY">Wyoming</option>
    </select>
</body>
</html>