jQWidgets DropDown Tests

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var myList = $('<div id="myList">AAAA</div>');
$('#myApp').append(myList);
myList.jqxDropDownList({
    width: 150,
    height: 26,
    source: [{ID: 1, TXT: 'AAA'}, {ID:2, TXT 'BBB'}, {ID:3, TXT:'CCC'}],
    valueMember: 'ID',
    
});

var clearButton = $('<button>Clear Selection</button>');
$('#myApp').append(clearButton);

clearButton.on('click', function () {
    myList.jqxDropDownList('clearSelection');
    $('#myApp').append('<div>val: "' + myList.jqxDropDownList('val') + '"</div>');
});