Вставка динамического параметра в выбранном теге, используя Jquery

Question

Я writed этот Jquery код:

$(document).ready(function(){ 
    $(document).on('change', '.prova > .target', function() { 
    $('div').removeClass('prova'); 
    $(this).parent().after($('<br>'), $('<div>', {"class": 'prova'}).append(
     $('<select>', {"class": 'target'}).append(  
      $('<option>', {value: 'option1', text: 'Option 1'}), 
      $('<option>', {value: 'option2', text: 'Option 2'})  
      ),$('<input>', {type: 'number', style: 'width: 35px', min: '1', max: '99', value: '1'}), 
     $('<button>', {type: 'button' , "class": 'remove_item', text: 'delete' }))); 
    });  
}); 

Полный пример here

Цель моего кода заключается в следующем:

Каждый раз новый параметр выбирается из <select> (только последний), создается новый <select>.

Теперь я хочу добавить вместо статической опции, добавленной из кода jquery, динамическую опцию. Например, предположим, что у меня есть

var obj = { 
    "option1": "Option 1", 
    "option2": "Option 2" 
}; 

Как я могу интегрировать в моей JQuery кода параметры, перечисленные выше, вместо статической вставки:

... 
$('<option>', {value: 'option1', text: 'Option 1'}), 
$('<option>', {value: 'option2', text: 'Option 2'}) 
... 

Answer 1

Вы можете сделать это:

var $mySelect = $('<select>', { 
    class: 'target' 
}); 
$.each(obj, function (val, text) { 
    $mySelect.append($('<option />', { 
     value: val, 
     text: text 
    })); 
}); 
var $input = $('<input>', { 
    type: 'number', 
    style: 'width: 35px', 
    min: '1', 
    max: '99', 
    value: '1' 
}); 

var $button = $('<button>', { 
    type: 'button', 
    class: 'remove_item', 
    text: 'delete' 
}); 

$(this).parent().after($('<br>', { 
    class: 'acapo' 
}), $('<div>', { 
    class: 'prova' 
}).append($mySelect, $input, $button)); 

FIDDLE DEMO