-3

Estou desenvolvendo uma aplicação que precisa ter um filtro de ativo, inativo e todos.

Onde ao estar ativo, deve aparecer todos os botões ativos, inativos, todos os inativos e todos, deve aparecer todos independente de seu status.

Contudo, não estou conseguindo automatizar isto com JavaScript.

Segue meu HTML e meu JS

<form action="" class="status">
        <label>
          <div>
            <select class="filter">
              <option>Filtro</option>
              <option value="active">Ativos</option>
              <option value="inactive">Inativos</option>
              <option value="all">Todos</option>
            </select>
          </div>
        </label>
        <div>
          <input type="submit" value="Buscar" class="ls-btn" title="Buscar">
        </div>
      </form>

const options = ['Ativos', 'Inativos'];
const select = document.createElement('select');

for(const option of options){
  const el = document.createElement('option');
  el = value = option;
  select.appendChild(el);
}

select.addEventListener('change', () => {
  filterElements(select.value);
});

function filterElements(option){
  const filteredElements = elements.filter(element => {
    if(option === 'Ativos'){
      return element.active;
    }else if(option === 'Inativos'){
      return !element.active;
    }
  });
  updateList(filteredElements);
}
2
  • Não entendi muito bem, você quer fazer um elemento de select usando js ? Ai o html de cima é só um exemplo ? 21/12/2022 às 18:33
  • @RubensBarbosa na verdade, quero fazer um filtro com o JS, onde ao clicar em alguma opção ele retorna os botões que estão com o status escolhido. Nunca fiz, então posso ter feito muito errado. 21/12/2022 às 18:37

1 Resposta 1

-2

Cara sua função esta boa, só falta alguns detalhes.

Vou deixar comentado o que faltou. Também na função de filterElements que você esta mostrando, falta alguns itens que você esqueceu de adicionar aqui como por exemplo a variável elements e a função updateList. Sendo assim eu vou ajustar aqui só até o listener de change ok ?

    const options = ['Ativos', 'Inativos'];
    const select = document.createElement('select');

    for(const option of options){
        const el = document.createElement('option');
        
        // el = value = option; -> essa sintaxe esta errada
        // use conforme abaixo:
        el.value = option;

        el.textContent = option; // adiciona essa linha para adicionar o texto do item

        select.appendChild(el);
    }

    select.addEventListener('change', e => {
        // use o e.target.value para pegar o valor do item selecionado
        console.log('CHANGE', e.target.value)
    });

    // adicione o select no body
    document.body.appendChild(select)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .