JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="form">
  <div class="select empty" id="document">
    <input type="hidden" value="">
    <div class="placeholder" data-empty="Selecione um documento"></div>
    <ul class="options"> </ul>
  </div>
  
  <div class="select empty" id="product">
    <input type="hidden" value="">
    <div class="placeholder" data-empty="Selecione um produto"></div>
    <ul class="options"></ul>
  </div>
  
  <div class="select empty" id="region">
    <input type="hidden" value="">
    <div class="placeholder" data-empty="Selecione uma região"></div>
    <ul class="options"></ul>
  </div>
  
  <div class="select empty" id="language">
    <input type="hidden" value="">
    <div class="placeholder" data-empty="Selecione um idioma"></div>
    <ul class="options"></ul>
  </div>
</div>

SCSS

*{  
  box-sizing:border-box;
}

.form{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  
  .select{
    position: relative;
    cursor: pointer;
    
    &.empty{
      opacity: 0.6;
      
      .placeholder::before{
        content: attr(data-empty);
      }
    }
    
    .placeholder{
      background: #d1d1d1;
      padding: 10px;
      border-radius: 5px;
    }
    
    .options{
      display: none;
    }
    
    &.active{
      .options{
        display: block;
        position: absolute;
        top: 100%;
        width: 100%;
        background: #d1d1d1;
        margin-top: 8px;
        padding: 10px;
        border-radius: 5px;
        list-style-position: inside;
        
        li{
          color: rgba(0,0,0,0.7);
          padding: 2px 4px;
          
          &:hover{
            color: #000;
          }
        }
      }
    }
  }
}

JavaScript

const documentos = [
  { nome: "doc1",
   produtos: [
     {
       nome: "PR X",
       regioes: [
         {
           nome: "Brasil",
           idiomas: [
             {
               nome: "PT-BR",
               arquivo: "doc1-prX-br.pdf"
             }
           ]
         }
       ]
     },
     {
       nome: "PR A",
       regioes: [
         {
           nome: "Brasil",
           idiomas: [
             {
               nome: "PT-BR",
               arquivo: "doc1-prX-br.pdf"
             }
           ]
         }
       ]
     }
   ]
  },
  { nome: "doc2",
   produtos: [
     {
       nome: "PR Y",
       regioes: [
         {
           nome: "Estados Unidos",
           idiomas: [
             {
               nome: "EN-US",
               arquivo: "doc1-prX-en.pdf"
             },
             {
               nome: "EN-EN",
               arquivo: "doc1-prX-en.pdf"
             }
           ]
         }
       ]
     }
   ]
  },
]

var currentProducts = [];
var currentRegions = [];
var currentLanguages = [];

// coloca documentos no primeiro select
documentos.map( (d, i) => {
	let option = document.createElement("li");
  option.innerHTML = d.nome
  option.setAttribute("value", i);
  document.getElementById("document").querySelector('.options').appendChild(option);
  document.getElementById("document").classList.remove("empty");
  document.getElementById("document").querySelector('.placeholder').innerHTML = document.getElementById("document").querySelector('.placeholder').getAttribute('data-empty');
});

// salva em currentProducts os produtos relacionados ao documento selecionado
document.getElementById("document").querySelector("input").addEventListener("change", () => {
  let value = document.getElementById("document").querySelector("input").value;
  currentProducts = [];
  documentos[value].produtos.map( (p, i) => {
  	currentProducts.push(p.nome);
  });
  
  //reseta os campos seguintes
  resetSelect("product");
  resetSelect("region");
 ...