如何将 select 选项元素的值分配给另一个 div 子元素

Question

我正在尝试制作一个根据某些标准显示图片的画廊，例如：1- 风格、2-年和 3- 尺寸。

我制作了一个 <select>，每个标准都有几个选项，如下所示：


<div id="SearchBar">
    You can filter the pictures according to the following options:<br><br>

  <label for="Estilo">Estilo:</label><br>

    <select name="Estilo" id="Estilo">
      <option value="vazio" >-</option>
      <option value="Pintura a óleo" >Pintura a óleo</option>
      <option value="Retrato">Retrato</option>
      <option value="Lápis" selected>Lápis</option>
      <option value="Aguarela">Aguarela</option>
      <option value="Ilustrações">Ilustrações</option>

    </select><br><hr>

  <label for="Ano">Ano:</label><br> 

    <select name="Ano" id="Ano">
      <option value="null">-</option>
      <option value="2018">2018</option>
      <option value="2017">2017</option>
      <option value="2016">2016</option>
      <option value="2015">2015</option>
      <option value="2014">2014</option>
      <option value="2013">2013</option>
      <option value="2012">2012</option>
      <option value="2011">2011</option>
      <option value="2010">2010</option>
      <option value="2009">2009</option>
      <option value="2008">2008</option>
      <option value="2007">2007</option>
      <option value="2006">2006</option>
      <option value="2005">2005</option>
      <option value="2004">2004</option>
      <option value="2003">2003</option>
      <option value="2002">2002</option>
      <option value="2001">2001</option>
      <option value="2000">2000</option>
      <option value="1999">1999</option>
    </select><br><hr>

    <label for="Dimensões">Dimensões:</label><br>

    <select name="Dimensões" id="Dimensões">
      <option value="null">-</option>
      <option value="pequeno">10*15 a 35*40</option>
      <option value="medio">35*40 a 50*50</option>
      <option value="grande">50*50 a 80*90</option>
      <option value="XXL">80*90 a 100*120</option>
    </select><br><hr><br>

    <button>Search</button> <button>Reset</button>
 </div>

现在，在另一个 div 我有实际照片，如果你想看，这里是 :

  <div id ="CaixaGaleria" class="gallery">
    <div><img src="/Imagens/Screenshot_20200728_064349.jpg" class="Pintura a óleo" alt=""></div>
    <div><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>
    <div><img src="/Imagens/Screenshot_20200725_233940.jpg" alt=""></div>
    <div><img src="/Imagens/quadra-mar.260x300.jpg" alt=""></div>
    <div><img src="/Imagens/Filme/2.jpg" alt=""></div>
    <div><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>
    <div><img src="/Imagens/Screenshot_20200725_233349.jpg" alt=""></div>
    <div><img src="/Imagens/Screenshot_20200725_233129.jpg" alt=""></div>
    <div><img src="/Imagens/Filme/Screenshot_20200725_233110.jpg" class="Lápis" alt=""></div>
  </div>

我的问题是 如何将 <option> 元素的值分配给 <img> 或 <div> 以便在以下情况下匹配它们我使用 JavaScript 并更改显示 .

例如，如果我想给 img 指定 2004 年。如何将它分配给特定的 div/img？

Answer 1

您的图库必须根据选择动态生成。如果您可以创建具有相应属性的图像数组，则可以使用数组的 map() 方法遍历它们并使用图像注入 div 个元素。

Answer 2

我会给 img 的父 div 数据属性。您显然希望以您自己的语言使用您自己的数据。

<div data-year="2014" data-size="xl" data-style="illustration"><img src="/Imagens/Screenshot_20200727_224457.jpg" alt=""></div>

然后在 javascript 中有一个事件侦听器，并在对象中设置每个值以供以后使用。然后默认隐藏所有照片，然后找到匹配的图像并显示它们。

    data = {};
    gallery = document.querySelectorAll(".gallery div");
    document.querySelector("select").addEventListener("change", function(e) {
      data[e.target.getAttribute("id")] = e.target.value;
    
      gallery.forEach(function(div) { //sets them ALL as hidden first
        div.style.display = "none";
      });
    
      if (data["Ano"] != "" & data["Estilo"] != "" && data["Dimensões"] != "") {
        images = document.querySelector('[data-size='" + data["Dimensões"] + "'][data-style='" + data["Estilo"] + "'][data-size='" + data["Ano"] + "']')
      
    
      images.forEach(function(image) {
        image.style.display = "block";
      });
}
    
    });

如何将 select 选项元素的值分配给另一个 div 子元素

How to assign value from select option elements to another div childs

html

javascript

parent-child