multiselect blog post demo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.min.js"></script>
<select multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
<input type="hidden" id="hidSelectedOptions" value="1" />

CSS

body {
    font-size: 13px;
}

JavaScript

$(document).ready(function() {
    $("select").multiselect({
       selectedText: "# of # selected"
    });
    var hidValue = $("#hidSelectedOptions").val();
    //alert(hidValue);
    var selectedOptions = hidValue.split(",");
    for(var i in selectedOptions) {
        var optionVal = selectedOptions[i];
        $("select").find("option[value="+optionVal+"]").prop("selected", "selected");
    }
    $("select").multiselect('refresh');
    

});