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.