jQuery UI Selectmenu Widget Testing (latest)

https://github.com/fnagel/jquery-ui/wiki/Selectmenu Selectmenu CSS and JS files are cached via my own server. Please use only for testing!

by haba713

HTML

<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
  <fieldset>
    <select name="speedD" id="speedD">
      <option value="1446">MT Synchrony Spec MX kypärä mattamusta/valkoinen, XS &nbsp; +112,13&nbsp;€</option>
      <option value="1445">MT Synchrony Spec MX kypärä mattamusta/valkoinen, S &nbsp; +112,13&nbsp;€</option>
      <option value="1444">MT Synchrony Spec MX kypärä mattamusta/valkoinen, M &nbsp; +112,13&nbsp;€</option>
      <option value="1443">MT Synchrony Spec MX kypärä mattamusta/valkoinen, L &nbsp; +112,13&nbsp;€</option>
      <option value="1442">MT Synchrony Spec MX kypärä mattamusta/valkoinen, XL &nbsp; +112,13&nbsp;€</option>
      <option value="1441">MT Synchrony Spec MX kypärä mattamusta/valkoinen, XXL &nbsp; +112,13&nbsp;€</option>
      <option value="1517">MT Synchrony Spec MX kypärä mattamusta/valkoinen, XXXL &nbsp; +112,13&nbsp;€</option>
    </select>
  </fieldset>
</form>

CSS

/* demo styles */

body {
  font-size: 62.5%;
  font-family: "Verdana", sans-serif;
}

fieldset {
  border: 0;
}

label,
select,
.ui-select-menu {
  float: left;
  margin-right: 10px;
}

select {
  width: 200px;
}

.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a {
  text-decoration: underline !important;
}

JavaScript

$(function() {

$('select#speedD').selectmenu({
    menuWidth: 400,
    format: addressFormatting
  });

});

//a custom format option callback
var addressFormatting = function(text) {
		return text.replace(',', '<br />');
}