1

Estou tentando mostrar tabelas diferentes de acordo com o que o usuário escolher. Tenho um exemplo de um usuário que compartilhou o código dele através do link:

http://jsfiddle.net/onury/kBQdS/

A tabela é atualizada através dos botões abaixo:

$('#btn-load').click(function(e) {
    dt.load(data1);
});

$('#btn-update').click(function(e) {
    dt.load(data2);
});

$('#btn-append').click(function(e) {
    dt.load(data1, true);
});

$('#btn-clear').click(function(e) {
    dt.clear();
});

Porém, a minha dúvida é exatamente fazer com que ao invés dos valores da tabela serem alteradas por botão, gostaria que fosse alterado por um dropdown? Alguém pode ajudar a me falar uma função que faria isso?

Obrigado,

2 Respostas 2

1

Tendo selecionado o seu dropdown:
Ex: $('#ddl-meu')

Voce pode usar o evento change ao inves do click do botao.

Aí você verifica qual o value que foi escolhido, e chama o método que você precisa. é a parte do switch no código.

$('#ddl-meu').change(function() {

  switch(this.value) {
    case "data1":
        dt.load(data1);
        break;
    case "data2":
        dt.load(data2);
        break;
    case "data1append":
        dt.load(data1, true);
        break;
    case "clear":
        dt.clear(data2);
        break;
    default:
  }

});
<select id="ddl-meu">
  <option value="data1">Data 1</option>
  <option value="data2">Data 2</option>
  <option value="data1append">Data 1 append</option>
  <option value="clear">Clear</option>
</select>
2
  • Andre, deu certo e tudo. Dentro desse formulário que estou fazendo tem mais alguns códigos que acabam por atualizando a página. E toda hora que atualiza, ele perde a informação de qual item foi selecionado. Existe alguma forma de quando a pessoa selecionar, ele ficar fixo? 3/04/2017 às 17:45
  • depende de como a pagina é atualizada... minha sugestão é voce colocar seu codigo inteiro numa nova pergunta, assim tanto eu quanto outros usuários podemos ver o todo e podemos te sugerir a melhor solução.
    – andrepaulo
    3/04/2017 às 18:34
0

Basta você passar os ids definidos no link de cada função:

HTML

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a id="btn-load" href="#">Load list</a>
    <a id="btn-update" href="#">Load List 2</a>
    <a id="btn-append" href="#">Append List 1</a>
    <a id="btn-clear" href="#">Clear list</a>
  </div>
</div>

CSS

/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

Simulação: http://jsfiddle.net/kBQdS/242/

Espero ter ajudado!

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 .