ドロップダウンボックスには、画像プラグインのタブを選択します

参考1：

[1] HTTPS：//github.com/rvera/imag ...
[2] HTTPS：//rvera.github.io/image ...
[3] のhttp：//websemantics.github.io ...

2プラグ1：画像ピッカー

これは、この論文では、プラグインを強調し、第一の基準、プラグインの第2のリンクです。数字を固執するエフェクトプラグイン。

画像ピッカーの2.1インストールと使用

具体的な使用方法は参考文献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>

あなたは、ピクチャプレビューするオプションラベルの添加のみを必要第二段階、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>

第3段jsが初期化：ターゲット要素（すなわち、選択素子に対応）（）メソッドの呼び出しをimagepicker。

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

3つの手順が完了したら、プラグインを使用できます。

2.2 imagepicker他の補足

ではimagepicker()画像の表示名を実現するためのオブジェクトを渡すことができ、元の画像だけの効果を表示するには、ドロップダウンオプションが表示されないドロップダウンリストを選択し、特定の命令が、第2のリンクは参考文献を参照します。

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

3プラグ2：イメージセレクト

これを達成することができ、良好な結果と映像コンテンツのプラグインを選択し、別のドロップダウンボックスです。すなわち、第三のウィジェット参照がリンクされています。エフェクトプラグインの実現のために、写真を貼り、興味のある学生はを参照することができます。