Добавить div содержимое с помощью jquery

Question

Мне нужно динамически добавлять содержимое div с помощью jquery.

когда я выбираю 10, например, я должен видеть в правой опции сторона 10:

коды этих элементов приведены следующим образом:

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

мой вопрос, как я могу добавить этот же код динамически, используя jquery и javascript таким образом, когда я выбираю вариант с пятью или десятками. Я получаю пять или десятки элементов.

Answer 1

Я сделал вам быстрый пример того, как вы можете сделать это:

$(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>

Answer 2

use $(selector).append() to append data