title: Inserting dynamic option in the select tag, using Jquery
body: <p>I have writed this jquery code:</p>
  
  <pre><code>$(document).ready(function(){
      $(document).on('change', '.prova &gt; .target', function() { 
      $('div').removeClass('prova');
      $(this).parent().after($('&lt;br&gt;'), $('&lt;div&gt;', {"class": 'prova'}).append(
          $('&lt;select&gt;', {"class": 'target'}).append(        
              $('&lt;option&gt;', {value: 'option1', text: 'Option 1'}),
              $('&lt;option&gt;', {value: 'option2', text: 'Option 2'})      
              ),$('&lt;input&gt;', {type: 'number', style: 'width: 35px', min: '1', max: '99', value: '1'}),
          $('&lt;button&gt;', {type: 'button' , "class": 'remove_item', text: 'delete' })));
      });    
  });
  </code></pre>
  
  <p>The complete example <a href="http://jsfiddle.net/Joseph82/DSRyX/10/" rel="nofollow">here</a></p>
  
  <p>The purpose of my code is the following:</p>
  
  <p>Each time a new option is selected from the <code>&lt;select&gt;</code> (only the last one) a new <code>&lt;select&gt;</code> is created.</p>
  
  <p>Now I want add, instead of the static option added from jquery code, a dynamic option. For example, supposing I have </p>
  
  <pre><code>var obj = {
    "option1": "Option 1",
    "option2": "Option 2"
  };
  </code></pre>
  
  <p>How can I integrate in my jquery code the options listed above instead of the static insert:</p>
  
  <pre><code>...
  $('&lt;option&gt;', {value: 'option1', text: 'Option 1'}),
  $('&lt;option&gt;', {value: 'option2', text: 'Option 2'}) 
  ...
  </code></pre>