如何使用自定义图标图像创建selectmenu“popup”样式？

Question

我对jquery很新，就像一个1天大的婴儿。 我已经查看了这个jquery_ui_selectmenu，但我无法理解如何将我的选择菜单转换为该链接中的一个名为“popup”样式的自定义图标图像。 这是我的选择代码。

<select name="fromCurrency" id="fromCurrency">
    <option selected value="EUR">EUR</option>
    <option value="USD">USD</option>
    <option value="GBP">GBP</option>
</select>

我基本上想要创建一个弹出/下拉列表，每个选项旁边都有图标。

尝试按照下面的说明应用更改后，下一个代码无法正常工作。 我错过了什么？

Answer 1

<强> jsfiddle example

1. 在<option> s上设置类属性：

   <option selected value="EUR" class="eur">EUR</option>
   

2. 使用<option>的课程.ui-selectmenu-item-icon为您的图标设置css：

   .eur .ui-selectmenu-item-icon {background: url('your/icon/path') 0 0 no-repeat;}
   

3. 最后在您拨打selectmenu时配置图标：

   $('#fromCurrency').selectmenu({
       icons: [
           {find: '.eur'},
           {find: '.usd'},
           {find: '.gbp'}
       ]
   });
   

Answer 2

您似乎只需要包含一个对象数组，指定接收图标的类名以及您要使用的图标的路径。这是网站提供的演示。

$('select#files, select#filesC').selectmenu({
    icons: [
        {find: '.script', icon: 'ui-icon-script'},
        {find: '.image', icon: 'ui-icon-image'} 
    ]

});