2

Tenho uma div que pode ser "clonada" em jquery, preciso que quando clicar em "Mostrar Produto" apareça a aba do produto e mostra um select, e ao clicar nesse select abra a div GRUPO 1 (dentro da div produto) dentro dessa div abre outro select que abre o SUB GRUPO, e ao clicar em "Mostrar Imposto" abre a div imposto...e que funcione depois de clonar...

Segue código no jsfiddle: https://jsfiddle.net/pfmfoe30/18/

function Listagem(index, el) {
    var divs = el.parentElement.querySelectorAll('div');
    for (var i = 0, l = divs.length; i < l; i++) {
        divs[i].style.display = i == index ? 'block' : 'none';
    }
}
$(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
});
a {cursor:pointer;}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 

<!-- botao que "clona" a div (engloba)  -->
<form>
    <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
    <div class="engloba">
        <a onClick="Listagem(0, this);">Mostra Produto</a> -
        <a onClick="Listagem(1, this);">Mostra Imposto</a>

        <div style="display:none;">
        <h1>Produto</h1>
        <!-- select que abre divs -->
        <select>
          <option value="00">ABRE GRUPO 1</option>
          <option value="01">ABRE GRUPO 2</option>
        </select>
         <!--div que abre via Value 00 -->
            <div id="00"> 
            GRUPO 1
               <!-- select que abre divs dentro da outra div -->
              <select>
               <option>Selecione</option>
              <option value="00">ABRE SUB-GRUPO 1</option>
              <option value="01">ABRE SUB-GRUPO 2</option>
            </select>
                <div>
                   DIV SUB-GRUPO 1                
                <div/>
                 <div>
                   DIV SUB-GRUPO 2                
                <div/>
            </div>
        </div>
         <div id="01"> 
            GRUPO 2
              <select>
               <option>Selecione</option>
              <option value="00">ABRE SUB-GRUPO 1</option>
              <option value="01">ABRE SUB-GRUPO 2</option>
            </select>
                <div>
                   DIV SUB-GRUPO 1                
                <div/>
                 <div>
                   DIV SUB-GRUPO 2                
                <div/>
            </div>
        </div>
        <div><H1>Imposto</H1></div>
    </div>
</div>

1 Resposta 1

3

Tens alguns erros no HTML, divs encerram-se com </div> e não <div/>. Para além disso mudando a estrutura ligeiramente (tenho a impressão que a estrutura na pergunta está errada) e usares

<div class="engloba">
        <a onClick="Listagem(0, this);">Mostra Produto</a> -
        <a onClick="Listagem(1, this);">Mostra Imposto</a>

        <div style="display:none;">
            <h1>Produto</h1>
            <select>
                <option>Selecione</option>

                <option value="00">ABRE GRUPO 1</option>
                <option value="01">ABRE GRUPO 2</option>
            </select>
            <div id="00">  // grupo 1
            ...
            <div id="01">  // grupo 2
            ...

em vez de subir na árvore depois do grupo 1, então fica simples e o que precisas é:

$('#conteudo_engloba').on('change', 'select', function() {
    var val = Number(this.value);
    $(this).nextAll('div').each(function(i) {
        $(this).toggle(val == i);
    });
});

jsFiddle: https://jsfiddle.net/fukeyjp1/1/

2
  • parabéns você me ajudou muito!! sem palavras pra descrever minha gratidão pela sua ajuda! D+++
    – Alh
    Commented 8/11/2016 às 16:44
  • amigo você sabe como fechar a div (remover) a div clonada caso clicar em "Fechar"? 2)Outra coisa, como fazer um checkbox abrir uma div ao "checar" e ao "deschecar" fechar..
    – Alh
    Commented 9/11/2016 às 5:07

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 .