Add div content using jquery

Question

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

You can add dynamic elements by using $(selector).html() or $(selector).append(). To add dynamic count, you can have loop to compute it. — Rajesh Dixit
– Rajesh Dixit, Commented Jan 15, 2016 at 10:51
What is {{ form_widget(form.critere1) }}? Not JS / CSS / HTML! — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 15, 2016 at 10:52
check for jquery template. This may solve your problem nit and clean. — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jan 15, 2016 at 10:53

YaBCK · Accepted Answer · 2016-01-15 11:07:44Z

2

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>

edited Jan 15, 2016 at 11:07

answered Jan 15, 2016 at 10:56

YaBCK

3,0394 gold badges36 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Majdi Taleb Over a year ago

but me I want to append the full code that I mentionned in my question

YaBCK Over a year ago

@MajdiTaleb - No problem, Glad I could help you out :)

Majdi Taleb Over a year ago

just still the problem of {{ form_widget(form.critere1) }} cannot be added, because this variable from symfony. thank you for this script

Jobelle · Accepted Answer · 2016-01-15 10:56:36Z

1

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

answered Jan 15, 2016 at 10:56

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

Add div content using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related