select标签的下拉框为图片的插件

1 参考文献：

[1] https://github.com/rvera/imag...
[2] https://rvera.github.io/image...
[3] http://websemantics.github.io...

2 插件1：image-picker

这个是参考文献中第一个、第二个链接的插件，本文重点说明这个插件。插件的效果先贴张图。

2.1 image-picker的安装与使用

具体的用法可以在参考文献2中找到，那个链接需要fq才能打开。
第一步，导入js与css文件。

<link rel="stylesheet" type="text/css" href="<%=path%>/jquery/image-picker/image-picker.css">
<script type="text/javascript" src="<%=path%>/jquery/image-picker/image-picker.js"></script>

第二步，仅需要在你想预览图片的option标签中加入data-img-src属性。

<select id="pic" name="pic" class="image-picker show-labels">
    <option  data-img-src='http://www.example.com/image.jpg'  value='42'></select>

第三步，在js中初始化：对目标元素（即对应的select元素）调用imagepicker()方法即可。

  <script type="text/javascript">
      $("select").imagepicker();
  </script>

经过上述三步，即可使用该插件。

2.2 imagepicker其它补充

在imagepicker()中可以传入一个对象，实现图片的名称显示、原始的select下拉列表不显示、下拉选项仅显示图片的效果，具体的说明可以参考参考文献中第二个链接。

 <script type="text/javascript">
      $("select").imagepicker({
          hide_select: false,   //原始的select下拉列表不显示、下拉选项仅显示图片的效果
          show_label: true //在图片下显示的图片名称
      });
  </script>

3 插件2：Image-Select

这个是另一个可以实现select下拉框内容为图片的插件，效果也不错。即参考文献中第三个链接的插件。对于插件实现的效果，贴张图，感兴趣的同学可以参考下。