Select 2 Wrap

by Sulthan Allaudeen

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<select class="select2 narrow wrap" id='selec'>
  <option value="S">Sulthan</option>
  <option value="A">Allaudeen</option>
</select>

















<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;background:#EEE;width:100%;'>
    About this SO Question: 
    <a href='http://stackoverflow.com/q/30788171/1366033'>
        Wrap selected text with Select2
    </a>
<div>

CSS

.select2.narrow {
    width: 200px;
}
.wrap.select2-selection--single {
    height: 100%;
}
.select2-container .wrap.select2-selection--single .select2-selection__rendered {
    word-wrap: break-word;
    text-overflow: inherit;
    white-space: normal;
}

JavaScript

var $select2 = $('.select2').select2({  
})
var select = $('#selec');
var option = $('<option></option>').
     attr('selected', true).
     text("Shaista").
     val(42);
option.appendTo(select);
select.trigger('change');