Demonstration
Introduces the basic use of ax5ui-select UI.

onChange

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

<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>
HTML
<form name="forms" class="form-inline">
    <div class="form-group">
        <div data-ax5select="select1" data-ax5select-config="{
                             name: 'select1',
                             minWidth: 150,
                             options:[
                                {value:'1', text:'select value 1'},
                                {value:'2', text:'select value 2'},
                                {value:'3', text:'select value 3'}
                                ]
                             }">
            <select data-ax-path="select1"></select>
        </div>
    </div>

    <div class="form-group">
        <div data-ax5select="select2" data-ax5select-config="{
                            name: 'select2',
                            minWidth: 200,
                            multiple: true,
                            options:[
                                {value:'3', text:'select value 3'},
                                {value:'4', text:'select value 4'},
                                {value:'5', text:'select value 5'},
                                {value:'6', text:'select value 6'}
                                ]
                            }">
            <select data-ax-path="select2"></select>
        </div>
    </div>

    <button type="button" class="btn" data-btn="setValue">setValue</button>
    <button type="button" class="btn" data-btn="getValue">getValue</button>

</form>
JS
<script type="text/javascript">
    $(document.body).ready(function () {
        $('[data-ax5select]').ax5select({
            theme: 'primary',
            onStateChanged: function () {
                console.log(this);
            }
        });

        $('[data-btn]').click(function () {
            var act = this.getAttribute("data-btn");
            switch (act) {
                case "setValue":
                    $('[data-ax-path="select1"]').val(2).trigger("change");
                    $('[data-ax-path="select2"]').val([5, 6]).trigger("change");
                    break;
                case "getValue":
                    console.log($('[data-ax5select="select1"]').ax5select("getValue"));
                    console.log($('[data-ax5select="select2"]').ax5select("getValue"));
                    console.log($(document.forms).serialize());
                    break;
            }
        });
    });
</script>

AX5UI Package

'AX5UI' can be used with Bootstrap theme. The development of the distribution of the various UI plug-in. When you click the link to move to AX5UI index page.

Get AXBoot

AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.

Code licensed
MIT
Mantained by
Thomas Jang, Brant and Team AXISJ
Templete design by
Jorwrney Kim
Copyright
Opensource Group AXISJ - www.axisj.com
DNS
DNSEver