Html DropDownList

Bind to the open event by type:jqxDropDownButton. Author: http://jqwidgets.com Author: http://jqwidgets.com

by Alexey Sharifullin

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="valid">
    <div id='jqxDropDownList'></div>
    <a href="#" id="btn">test</a>
</div>

JavaScript

var source = [
       "",
       "Affogato",
       "Americano",
       "Bicerin",
       "Breve",
       "Café Bombón",
       "Café au lait",
       "Caffé Corretto",
       "Café Crema",
       "Caffé Latte"];
   // Create a jqxDropDownList
   $("#jqxDropDownList").jqxDropDownList({
       source: source,
       theme: 'energyblue',
       width: '200px',
       height: '25px',
       selectedIndex: 3
   });
$("#btn").on("click", function() {
    $('#valid').jqxValidator('validate');
});


$('#valid').jqxValidator( { rules: [{ input: '#jqxDropDownList', message: 'The value is required!', action: 'changed', rule: function (data) { 
    var v = $("#" + data[0].id).val(); 
    return !(v===undefined || v==="");
    }  }] } );