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' 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.
AXBoot makes it easy to build web applications with Java & HTML5 Repeatable and noise development process are resolved by AXBoot.