Open DIV with Select in div Cloned with jquery

Question

Open DIV with Select in div Cloned with jquery

Navigation

#1 by (3 votes)

2

I have a div that can be "cloned" in jquery, so when I click on "Show Product" the product tab will appear and it will show a select, and clicking on that select open the GROUP 1 div (inside the product div) inside this div opens another select that opens the SUB GROUP, and clicking "Show Tax" opens the tax div ... and that works after cloning ...

Follow the code in jsfiddle: link

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><!--botaoque"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>

javascript jquery

asked by anonymous 08.11.2016 / 15:57

1 answer

php can not copy remote file, but it downloads via browser How to make a button with link in AngularJS

score 3 · Accepted Answer

You have some HTML errors, divs are closed with </div> and not <div/> . Also changing the structure slightly (I have the impression that the structure in question is wrong) and you use

<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
            ...

instead of climbing the tree after group 1, then it's simple and what you need is:

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

Open DIV with Select in div Cloned with jquery

1 answer

jsFiddle: link