onExpand

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"></div>
    </div>
    <button type="button" class="btn" data-btn="getValue">getValue</button>
</form>

<script type="text/javascript">
    $(document.body).ready(function () {
        var EL = $('[data-ax5select="select1"]');
        EL.ax5select({
            theme: "success",
            minWidth: 200,
            onStateChanged: function () {
                //console.log(this);
            },
            lang: {
                loading: '<i class="fa fa-spinner fa-pulse"></i>'
            },
            onExpand: function (callBack) {
                setTimeout(function () {
                    callBack({
                        options: [
                            {value: "V0", text: "callBack Text 0"},
                            {value: "V1", text: "callBack Text 1"},
                            {value: "V2", text: "callBack Text 2"},
                            {value: "V3", text: "callBack Text 3"}
                        ]
                    });
                }, 300);
            }
        });

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