optgroup

Paste the following code into the head section of your site’s HTML.

<link rel="stylesheet" type="text/css" href="src/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="src/ax5ui-select/dist/ax5select.css">
<script type="text/javascript" src="src/ax5ui-select/dist/ax5select.min.js"></script>

<form name="forms" class="form-inline">
    <div class="form-group">
        <div data-ax5select="select1" data-ax5select-config="{
                            size: "",
                            multiple: false,
                            minWidth: 200
                        }"></div>
    </div>
    <div class="form-group">
        <div data-ax5select="select2" data-ax5select-config="{
                            size: "",
                            multiple: true,
                            minWidth: 200,
                            reset:"<i class=\"fa fa-trash\"></i>"
                        }"></div>
    </div>
    <button type="button" class="btn" data-btn="getValue">getValue</button>
</form>

<script type="text/javascript">
    $(document.body).ready(function () {
        var options = [
            {
                optgroup: "group label1",
                options: [
                    {value: 1, text: "text1"},
                    {value: 2, text: "text2"},
                    {value: 3, text: "text3"}
                ]
            },
            {
                optgroup: "group label2",
                options: [
                    {value: 4, text: "text4"},
                    {value: 5, text: "text5"},
                    {value: 6, text: "text6"}
                ]
            }
        ];

        $('[data-btn]').click(function () {
            var act = this.getAttribute("data-btn");
            switch (act) {
                case "getValue":
                    console.log($('[data-ax5select="select1"]').ax5select("getValue"));
                    console.log($('[data-ax5select="select2"]').ax5select("getValue"));
                    break;
            }
        });

        $('[data-ax5select]').ax5select({
            options: options
        });

    });
</script>