Edit in JSFiddle

     var data = [{
         id: 0,
         text: "Option 1"
     }, {
         id: 1,
         text: "Option 2"
     }, {
         id: 2,
         text: "Option 3"
     }, {
         id: 3,
         text: "Option 4"
     }];

    var biggerData = [];
    for (var i = 0; i <= 100; i++) {
        biggerData.push({
            id: i,
            text: 'Option ' + i
        })
    }

     var optionGroupData = [{
         text: 'Recently searched Items',
         children: [{
             id: 2,
             text: 'Option 1'
         }, {
             id: 3,
             text: 'Option 2'
         }]
     }, {
         text: 'Items to be selected',
         children: [{
             id: 4,
             text: 'Option 3'
         }]

     }];

     Vendavo.List({
         id: 'mandatory',
         dataSet: data,
         placeholder: 'Select something',
         multiple: true,
         container: '#listPlace1',
         state: Vendavo.componentModes.FORM_WRITE,
         allowClear: true,         
         val: [1, 2]
     });

     Vendavo.List({
         id: 'mandatory2',
         dataSet: optionGroupData,
         state: Vendavo.componentModes.FORM_WRITE,
         placeholder: 'Select something',
         multiple: false,
         container: '#listPlace2',
         allowClear: true,
         val: [2]
     });

Vendavo.List({
        id: 'mandatory3',
        dataSet: biggerData,
        allowClear: true,
        placeholder: 'Select something',
        multiple: true,
        container: '#listPlace3',
        state: Vendavo.componentModes.PRESENTATION
    });



     // DON'T REMOVE THIS
     var path = "http://ux01-paux.xenre.vendavo.com/proto_ux-enterprise/_/";
     var styles = ['bower_components/bootstrap/dist/css/bootstrap.min.css','bower_components/fontawesome/css/font-awesome.css', 'bower_components/icomoon/dist/css/style.css', 'bower_components/select2-ng/select2.css', 'bower_components/select2-ng/select2-bootstrap.css', 'css/styleguide.css', 'css/theme.css'];
     styles.forEach(function (item, i) {
         var style = document.createElement('link');
         style.rel = 'stylesheet';
         style.type = 'text/css';
         style.href = path + item;
         document.getElementsByTagName('head')[0].appendChild(style);
     });
     // DON'T REMOVE THIS ^^^^^^^

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<script src="http://ux01-paux.xenre.vendavo.com/pezzi/Pezzi.build.js"></script>

<section class="container">
    <div class="row row-offcanvas row-offcanvas-right">
        <div class="content col-xs-12 col-sm-9">
            <br /><br />
            <p id="listPlace1"></p>
            <p id="listPlace2"></p>
            <p id="listPlace3"></p>
        </div>
    </div>
</section>