Html5 DropDownList

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

by mark edwards

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='jqxDropDownList'></div>

JavaScript

var source = [
      "<span class='ipSymbol'>θ</span>\
    <span class='ipSymbol'>ʃ</span>\
    <span class='ipSymbol'>t</span>\
    <span class='ipSymbol'>ʊ</span>\
    <span class='ipSymbol'>ʌ</span>",
      "Affogato",
      "Americano",
      "Bicerin",
      "Breve",
      "Café Bombón",
      "Affogato",
      "Americano",
      "Bicerin",
      "Breve",
      "Café Bombón",
      "Café au lait"];
  // Create a jqxDropDownList
  $("#jqxDropDownList").jqxDropDownList({
      source: source,
      theme: 'energyblue'
  });
  $('span.class').on('mouseover', (event) => {
      console.log(event);
  })
  $('#jqxDropDownList').on('select', function (event) {
       console.log(event.args.originalEvent.pageX);
       console.log(event.currentTarget.offsetWidth);
      //debugger;
       var args = event.args;
       if (args) {
           // index represents the item's index.                          
           var index = args.index;
           var item = args.item;
           // get item's label and value.
           var label = item.label;
           var value = item.value;
           $('#jqxDropDownList').jqxDropDownList('unselectIndex',event.args.index ); 
           //alert("label: " + label);
       }
   });