I have to add dynamically the content of div using jquery.
when I choose 10 for example, I should see in the right side 10 option of :
the code of these element are given as follow:
<nav class="choose_option" id="navch">
{{ form_widget(form.critere1) }}
<select id="select1">
<option value="normal" class="highlight_orange">Normal</option>
<option value="nombre">Nombre</option>
</select>
<select id="op1">
<option value="like" class="highlight_orange">Like</option>
<option value="not like">NOT LIKE</option>
<option value="=">=</option>
<option value="<"><(inf)</option>
<option value=">"><(sup)</option>
<option value="<>"> <></option>
</select>
<input type="text" id="txtcrit1" {{ app.request.get('txtcrit1') }}/>
</nav>
<nav>
<ul class="list">
<li class="list__item left pushright">
<label class="label--checkbox">
<input type="radio" name="radio" value="AND" class="checkbox" id="chx1">
ET
</label>
</li>
<li class="list__item left pushright">
<label class="label--checkbox">
<input type="radio" name="radio" value="OR" class="checkbox" id="chx2">
OU
</label>
</li>
</ul>
</nav>
my question, how I can add this same code dynamically using jquery and javascript in such a way when I choose five or tens option I get five or tens elements
I've done you a quick example of how you can do this:
$( document ).ready(function() { $('#selectBox').on('change', function() { switch (this.value) { case "5": case "10": for (i = 0; i < this.value; i++) { $("#appendToMe").append('<nav class="choose_option" id="navch">{{ form_widget(form.critere1) }}<select id="select1"><option value="normal" class="highlight_orange">Normal</option><option value="nombre">Nombre</option></select><select id="op1"><option value="like" class="highlight_orange">Like</option><option value="not like">NOT LIKE</option><option value="=">=</option><option value="<"><(inf)</option><option value=">"><(sup)</option><option value="<>"> <></option></select><input type="text" id="txtcrit1" {{ app.request.get("txtcrit1") }}/></nav><nav><ul class="list"><li class="list__item left pushright"><label class="label--checkbox"><input type="radio" name="radio" value="AND" class="checkbox" id="chx1">ET</label></li><li class="list__item left pushright"><label class="label--checkbox"><input type="radio" name="radio" value="OR" class="checkbox" id="chx2">OU</label></li></ul></nav>'); } break; } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="selectBox"> <option>select option</option> <option>5</option> <option>10</option> </select> <div id="appendToMe"> </div>
use $(selector).append() to append data
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.