MultiSelect jQuery plugin demo

HTML

<script src="http://lzzluca.github.io/javascript/MultiSelect/multiselect-min.js"></script>
<select id="test_target_no_optgroup"></select>
<div id="btns"></div>

CSS

select {
    margin-left: 25px;
}
p {
    margin: 15px;
}
.descri {
    margin-left: 25px;
    color: dimgray;
}
.descri_footer {
    color: lightslategrey;
    font-size: 13px;
    margin-top: 100px;
}
.category {
    cursor: pointer;
}
.wrap_categories {
    margin-left: 25px;
    margin-top: 10px;
    border: 1px solid #d6d6d6;
}
.wrap_categories div:hover {
    background-color: blueviolet;
}
.main_categories {
    display: inline-block;
    width: auto;
}
div.category:hover {
    color: blue;
}

JavaScript

var options_HTML = "";
var btns_HTML = "";
for (var i = 0; i < 10; i++) {
    options_HTML += "<option value = 'opcao " + i + "' >Escolha a opção " + i + "</option>";
    btns_HTML += "<button type='button' data-value='" + i + "'>Escolha a opção " + i + "</button>";
}

$("#test_target_no_optgroup").append(options_HTML);
$("#btns").append(btns_HTML);



$("#test_target_no_optgroup").MultiSelect({
    size: 20
});


$('button').on('click', function () {
    $("#test_target_no_optgroup").find('option').eq($(this).data('value')).prop('selected', true);
    console.log($("#test_target_no_optgroup").val());
});