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下拉框內容爲圖片的插件，效果也不錯。即參考文獻中第三個連接的插件。對於插件實現的效果，貼張圖，感興趣的同窗能夠參考下。