Drop-down box select the tab for the image plugin

Reference 1:

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

2 Plug 1: image-picker

This is the first reference, the second link of plug-ins, this paper highlights the plugin. Effect plug-ins to stick figures.

2.1 Installation and use of image-picker

Specific usage can be found in Reference 2, the link needs to open fq.
The first step, import js and css files.

<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>

The second step, requiring only the addition of the option label you want to preview the picture data-img-srcproperties.

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

A third step js initialized: call imagepicker of the target elements (i.e., corresponding to the select element) () method.

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

After these three steps, you can use the plugin.

2.2 imagepicker other supplemental

In imagepicker()can pass an object to realize a picture display name, the original select the drop-down list does not show the drop-down option to display only the effect of the picture, the specific instructions refer to the references the second link.

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

3 Plug 2: Image-Select

This can be achieved is another drop-down box select the picture content plug-ins, with good results. I.e., the third widget references are linked. For the realization of effects plug-ins, stick Photo, interested students can refer to.