Save multiple dropdown select value by using chosen-select jquery

See more:

C#5.0

Here is my js & css File.

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
    <script src="chosen.proto.js" type="text/javascript"></script>
    <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        document.observe('dom:loaded', function (evt) {
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: "Oops, nothing found!" },
                '.chosen-select-width': { width: "95%" }
            }
            var results = [];
            for (var selector in config) {
                var elements = $$(selector);
                for (var i = 0; i < elements.length; i++) {
                    results.push(new Chosen(elements[i], config[selector]));
                }
            }
            return results;
            
        });
  </script>

Here is my design div

<div class="side-by-side clearfix">
    <div>
        Single Select with Groups
    </div>
    <div>
        <asp:DropDownList ID="ddlchk1" runat="server" data-placeholder="Your Favorite Football Team" style="width: 350px;" multiple class="chosen-select">
    </div>
</div>

This code working perfectly and display multiple selected dropdown value, but I want save the selected valu to my sql server database.

What I have tried:

Here is my js file code. I want populate the selected values but its not working perfectly.

$(document).ready(function () {
    alert("dsd");
    $(document).ready(function () {
        $("#ddlchk1").chosen();
        $("#btnSubmit").click(function () {
            console.log($("#ddlchk1").val());
            alert(console.log($("#ddlchk1").val()));
        });
    });
})