Html DropDownButton

Invoke the getContent method of the jqxDropDownButton Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div>
    <input style="margin-bottom:10px;" type="button" id='jqxButton' value="Get the content" />
</div>
<div id='jqxWidget'>
    <div style='float: left;' id="dropDownButton">
        <div style="border: none;" id='jqxTree'>
            <ul>
                <li item-selected='true'>Home</li>
                <li item-expanded='true'>Solutions
                    <ul>
                        <li>Education</li>
                        <li>Solutions
                            <ul>
                                <li>eLearning</li>
                                <li>Mobile</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Products
                    <ul>
                        <li>PC products</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

JavaScript

$("#dropDownButton").jqxDropDownButton({
     width: 150,
     height: 19,
     theme: 'energyblue'
 });
 $("#jqxTree").jqxTree({
     theme: 'energyblue'
 });
 $('#dropDownButton').jqxDropDownButton('setContent', 'Please Select');
 $("#jqxButton").jqxButton({
     height: '30px',
     width: '120px',
     theme: 'energyblue'
 });
 $('#jqxButton').on('click', function () {
     var content = $('#dropDownButton').jqxDropDownButton('getContent');
     alert(content);
 });