<!DOCTYPE html>
<html>
<head>
    <title>jQuery Boilerplate</title>
    <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../src/jquery.bootstrap-duallistbox.js"></script>
</head>
<body class="container">
<select id="element" name="myselect" multiple>
    <option>element 1</option>
    <option>element 2</option>
    <option>element 3</option>
    <option>element 4</option>
</select>
<script>
    $(function () {
        $('#element')
                .bootstrapDualListbox({
                    bootstrap2Compatible: false,
                    moveAllLabel: 'MOVE ALL',
                    removeAllLabel: 'REMOVE ALL',
                    moveSelectedLabel: 'MOVE SELECTED',
                    removeSelectedLabel: 'REMOVE SELECTED',
                    filterPlaceHolder: 'FILTER',
                    filterSelected: '2',
                    filterNonSelected: '1',
                    moveOnSelect: false,
                    preserveSelectionOnMove: 'all',
                    helperSelectNamePostfix: '_myhelper',
                    selectedListLabel: 'Selected elements',
                    nonSelectedListLabel: 'Unselected elements'
                })
                .bootstrapDualListbox('setMoveAllLabel', 'Move all teh elementz!!!')
                .bootstrapDualListbox('setRemoveAllLabel', 'Remove them all!')
                .bootstrapDualListbox('setSelectedFilter', undefined)
                .bootstrapDualListbox('setNonSelectedFilter', undefined)
                .append('<option>added element</option>')
                .bootstrapDualListbox('refresh')
    });
</script>
</body>
</html>
