JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<div class = "face left">
  <img src = "http://conference.unavsa.org/wp-content/uploads/2012/04/empty-face.jpg"><br>
  <select>
    <option value="empty">Select one</option>
    <option value="http://www.uni-regensburg.de/Fakultaeten/phil_Fak_II/Psychologie/Psy_II/beautycheck/english/durchschnittsgesichter/m%2801-32%29_gr.jpg">Takeshi</option>
    <option value="http://bloximages.chicago2.vip.townnews.com/azstarnet.com/content/tncms/assets/v3/editorial/3/78/3781cbf8-0d81-511b-8edd-10fcbf43ace5/50ef7ffaab184.preview-620.jpg">Osuka</option>
    <option value="http://www.ifp.illinois.edu/~hu3/FaceReconstruction/Images/Man-OriginalFrontalFace.bmp">Alesu</option>
  </select>
</div>
<div class = "face right">
  <img src = "http://conference.unavsa.org/wp-content/uploads/2012/04/empty-face.jpg"><br>
  <select>
    <option value="empty">Select one</option>
    <option value="http://www.uni-regensburg.de/Fakultaeten/phil_Fak_II/Psychologie/Psy_II/beautycheck/english/durchschnittsgesichter/m%2801-32%29_gr.jpg">Takeshi</option>
    <option value="http://bloximages.chicago2.vip.townnews.com/azstarnet.com/content/tncms/assets/v3/editorial/3/78/3781cbf8-0d81-511b-8edd-10fcbf43ace5/50ef7ffaab184.preview-620.jpg">Osuka</option>
    <option value="http://www.ifp.illinois.edu/~hu3/FaceReconstruction/Images/Man-OriginalFrontalFace.bmp">Alesu</option>
  </select>
</div>

CSS

.face img
  {
  width: 120px;
  height: 120px;
  }

.left
  {
  float: left;
  }

.right
  {
  float: right;
  }
  }

JavaScript

$('.face > select').change(function()
   {
   $(this).
     siblings('img').attr('src', $(this).val());
   });