选择字段中的图像下拉列表

Question

我希望有一个图像下拉列表，其中每个图像都存储在每个选项字段中。这必须在chrome中工作。

Answer 1

您可以使用wSelect添加图标或图像以选择框选项

支持： Chrome，IE7 +，FireFox，Opera，Safari

wSelect是一个快速轻量级的jQuery插件，它将默认的html选择元素转换为可自定义且外观整洁的选择框，其中包含一些主题和选项。 wSelect还允许您使用data-icon属性向选择选项添加图标。 如何使用它：

1. 在您的网页上包含jQuery库和jQuery wSelect

2. 包含必需的jQuery wSelect CSS来设置选择元素的样式

3. 创建一个html选择框。

   选择CountryAustralia 加拿大 波兰 泰国 英格兰（英国）

4. javacript

   $（ '选择'）wSelect（）。 $（'＃demo'）。change（function（）{ 的console.log（$（本）.VAL（））; }）; 。$（ '＃演示'）VAL（ '非盟'）变化（）; //应该在控制台中看到 $（ '＃演示'）VAL（ 'PL'）wSelect（ '变化'）。; //应该会看到所选选项更改为三 $（'＃demo'）。append（'United States of America'）。wSelect（'reset'）; $（ '＃演示'）VAL（ 'CA'）变化（）。;

5. 更多选项

   $。fn.wSelect.defaults = { 主题：'经典'，//主题 size：'4'，//要显示的默认选项数（在size元素上用select attr覆盖） labelPosition：'left'，//设置标签的位置（左，上） highlight：true //选中时突出显示字段 };

参考：http://www.jqueryscript.net/form/Customizable-jQuery-Select-Box-Replacement-Plugin-wSelect.html

您也可以使用iconselet http://bug7a.github.io/iconselect.js/