Keep picture with slectMenu after selected
I use jquery UI - Select Menu to build a List with picture. I follow
this link
and it's good. But When you select an item, just the text is copying, not the picture. I explain why I want picture. I've a List with no text, just picture, then When you choose an item, you see an empty span ... Someone have an idea?
-
<script type="text/javascript"> $(function () { $.widget("custom.iconselectmenu", $.ui.selectmenu, { _renderItem: function (ul, item) { var li = $("<li>", { html: item.element.html() }); var attr = item.element.attr("data-style"); if (typeof attr !== typeof undefined && attr !== false) { $("<span>", { style: item.element.attr("data-style"), "class": "ui-icon TFOOptlstFiltreImg" }).appendTo(li); } return li.appendTo(ul); } }); $("#people") .iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons"); }); </script> <style type="text/css"> select { width: 200px; } </style> <select name="people" id="people"> <option value="1" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option> <option value="2" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option> <option value="3" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option> </select> -
Here fiddle demo
Topic Participants
myleborgne2005
jakecigar