title: How to assign value from select option elements to another div childs
body: <p>I am trying to make a gallery which shows pictures according to some criteria like : 1- style, 2 -year and 3- size.</p>
  <p>I have made a <code>&lt;select&gt;</code> with a few options for each criteria as you can see below :</p>
  <pre><code>
  &lt;div id=&quot;SearchBar&quot;&gt;
      You can filter the pictures according to the following options:&lt;br&gt;&lt;br&gt;
  
    &lt;label for=&quot;Estilo&quot;&gt;Estilo:&lt;/label&gt;&lt;br&gt;
  
      &lt;select name=&quot;Estilo&quot; id=&quot;Estilo&quot;&gt;
        &lt;option value=&quot;vazio&quot; &gt;-&lt;/option&gt;
        &lt;option value=&quot;Pintura a óleo&quot; &gt;Pintura a óleo&lt;/option&gt;
        &lt;option value=&quot;Retrato&quot;&gt;Retrato&lt;/option&gt;
        &lt;option value=&quot;Lápis&quot; selected&gt;Lápis&lt;/option&gt;
        &lt;option value=&quot;Aguarela&quot;&gt;Aguarela&lt;/option&gt;
        &lt;option value=&quot;Ilustrações&quot;&gt;Ilustrações&lt;/option&gt;
  
      &lt;/select&gt;&lt;br&gt;&lt;hr&gt;
  
    &lt;label for=&quot;Ano&quot;&gt;Ano:&lt;/label&gt;&lt;br&gt; 
  
      &lt;select name=&quot;Ano&quot; id=&quot;Ano&quot;&gt;
        &lt;option value=&quot;null&quot;&gt;-&lt;/option&gt;
        &lt;option value=&quot;2018&quot;&gt;2018&lt;/option&gt;
        &lt;option value=&quot;2017&quot;&gt;2017&lt;/option&gt;
        &lt;option value=&quot;2016&quot;&gt;2016&lt;/option&gt;
        &lt;option value=&quot;2015&quot;&gt;2015&lt;/option&gt;
        &lt;option value=&quot;2014&quot;&gt;2014&lt;/option&gt;
        &lt;option value=&quot;2013&quot;&gt;2013&lt;/option&gt;
        &lt;option value=&quot;2012&quot;&gt;2012&lt;/option&gt;
        &lt;option value=&quot;2011&quot;&gt;2011&lt;/option&gt;
        &lt;option value=&quot;2010&quot;&gt;2010&lt;/option&gt;
        &lt;option value=&quot;2009&quot;&gt;2009&lt;/option&gt;
        &lt;option value=&quot;2008&quot;&gt;2008&lt;/option&gt;
        &lt;option value=&quot;2007&quot;&gt;2007&lt;/option&gt;
        &lt;option value=&quot;2006&quot;&gt;2006&lt;/option&gt;
        &lt;option value=&quot;2005&quot;&gt;2005&lt;/option&gt;
        &lt;option value=&quot;2004&quot;&gt;2004&lt;/option&gt;
        &lt;option value=&quot;2003&quot;&gt;2003&lt;/option&gt;
        &lt;option value=&quot;2002&quot;&gt;2002&lt;/option&gt;
        &lt;option value=&quot;2001&quot;&gt;2001&lt;/option&gt;
        &lt;option value=&quot;2000&quot;&gt;2000&lt;/option&gt;
        &lt;option value=&quot;1999&quot;&gt;1999&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;&lt;hr&gt;
  
      &lt;label for=&quot;Dimensões&quot;&gt;Dimensões:&lt;/label&gt;&lt;br&gt;
  
      &lt;select name=&quot;Dimensões&quot; id=&quot;Dimensões&quot;&gt;
        &lt;option value=&quot;null&quot;&gt;-&lt;/option&gt;
        &lt;option value=&quot;pequeno&quot;&gt;10*15 a 35*40&lt;/option&gt;
        &lt;option value=&quot;medio&quot;&gt;35*40 a 50*50&lt;/option&gt;
        &lt;option value=&quot;grande&quot;&gt;50*50 a 80*90&lt;/option&gt;
        &lt;option value=&quot;XXL&quot;&gt;80*90 a 100*120&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;
  
      &lt;button&gt;Search&lt;/button&gt; &lt;button&gt;Reset&lt;/button&gt;
   &lt;/div&gt; 
  </code></pre>
  <p>Now , in another div I have the actual photos, if you want to see, here it is :</p>
  <pre><code>  &lt;div id =&quot;CaixaGaleria&quot; class=&quot;gallery&quot;&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200728_064349.jpg&quot; class=&quot;Pintura a óleo&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200727_224457.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200725_233940.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/quadra-mar.260x300.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Filme/2.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200727_224457.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200725_233349.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Screenshot_20200725_233129.jpg&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src=&quot;/Imagens/Filme/Screenshot_20200725_233110.jpg&quot; class=&quot;Lápis&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>My question is <strong>how do I assign the values from <code>&lt;option&gt;</code> element to the <code>&lt;img&gt;</code> or <code>&lt;div&gt;</code></strong> in order t match them when I use JavaScript and change the display .</p>
  <p>For example , If I want to give an img the year 2004. How do I assign it to a specific div/img ?</p>