Geek Answers Handbook

Display multiple instances of the same div with a different title

I would like to display a specific div several times depending on the number of checkboxes selected in the previous step. Similar to step 3.2 in this form . What is the best way to do this?

The div that I want to display several times depending on the number of flags selected, where h3 (#tile_name) is the value of this flag:

<div class="plan_select" id="border"> <h3 id="tile_name">Tiles - Selected</h3> <div class='styled-select'> <select name='bankskivans'> <option value='Halvrund'>Halvrund</option> <option value='Helrund'>Helrund</option> <option value='Karnis helrund'>Karnis helrund</option> <option value='Nosformad'>Nosformad</option> <option value='Rak fasad'>Rak fasad</option> <option value='Rak rundad'>Rak rundad</option> <option value='Vattenfall'>Vattenfall</option> </select> </div> </div>

JS Fiddle https://jsfiddle.net/L7swuv8g/

JQuery code:

 $(document).ready(function() { var $measures = $('input.checkbox_plan'); var $showmeasures = $('input[name="measures_show"]'); var $border = $('div#border'); $measures.hide(); $border.hide(); $showmeasures.on('click', function() { if ($(this).is(':checked')) { $measures.show(); $border.show(); } else { $measures.hide(); $border.hide(); } }); });
+7
jquery html
source share
2 answers

Not sure what exactly you want, but maybe this works for you?

I have it make an instance of your content template for each checkbox selected. (Or not if none are selected.)

https://jsfiddle.net/d6k40wd0/2/

HTML:

 <div id='template' style='display:none'> <div class='plan_select' id='border'> <h3 id='tile_name'>#title#</h3> <div class='styled-select'> <select name='bankskivans'> <option value='Halvrund'>Halvrund</option> <option value='Helrund'>Helrund</option> <option value='Karnis helrund'>Karnis helrund</option> <option value='Nosformad'>Nosformad</option> <option value='Rak fasad'>Rak fasad</option> <option value='Rak rundad'>Rak rundad</option> <option value='Vattenfall'>Vattenfall</option> </select> </div> </div> </div> <label for="a"><input type="checkbox" id="a" value="alpha" class="templateChoice" />Choose a.</label> <label for="b"><input type="checkbox" id="b" value="bravo" class="templateChoice" />Choose b.</label> <label for="c"><input type="checkbox" id="c" value="charlie" class="templateChoice" />Choose c.</label> <label for="d"><input type="checkbox" id="d" value="delta" class="templateChoice" />Choose d.</label> <br /> <button type="button" onclick="showResult();">Show result</button> <hr /> <div id="result"></div>

JavaScript:

 function showResult() { var template = $("#template").html(); $("#result").html(""); $.each($(".templateChoice"), function(index, checkbox) { if (checkbox.checked) { var templateCopy = template.replace("#title#", "You selected " + checkbox.value); $("#result").html($("#result").html() + templateCopy); } }); }
+6
source share
  • jQuery is sucks
  • All you need to know is 2 methods: document.createElement () and appendChild ()

See the code below:

  var node = document.createElement("DIV"); node.style. ... = ... ; // you can create your own prototype of block

For example, if you need a class:

  node.setAttribute("class", "class_name second_class_name");

Set the block text and then just copy your prototype block into the DOM method:

  node.innerHTML = "Text of block"; document.getElementById("container_id").appendChild(node); //your container id

And again:

  node.innerHTML = "Text of second block"; document.getElementById("container_id").appendChild(node);

So you can display as many times as you need

Hi

+1
source share

More articles:


All Articles