Cant Append options to a select dropdown dynamically

Question

i am creating a javascript function which when clicked will create two drop downs and one text box and will append the html to the container div

but the problem is that, somehow it can't append the oprions to the two drop downs.

Here's my script

var i = 0;
function add_relation()
{
    i = i + 1;
    var condition = $('<select />', {
                             'class'  : 'relation-select',
                             'id'     : 'condition_' + i,
                             'name'   : 'condition[]'
                         });

    var key = $('<select />', {
                             'class'  : 'relation-select',
                             'id'     : 'key_' + i,
                             'name'   : 'key[]'
                         });

    $("#key_"+i).append('<option value="">Select Key</option>' + 
                        '<option value="product_title">Title</option>' + 
                        '<option value="type">Type</option>' +
                        '<option value="product_price">Price</option>' +
                        '<option value="product_weight">Weight</option>');

    $("#condition_"+i).append('<option value="">Select Condition</option>'+
                        '<option value="is_equal_to">Is Equal To</option>'+
                        '<option value="is_greater_than">Is Greater Than</option>'+
                        '<option value="is_less_than">Is Less Than</option>'+
                        '<option value="starts_with">Starts With</option>'+
                        '<option value="ends_with">Ends With</option>'+
                        '<option value="contains">Contains</option>');

    var left = $('<div />', {'class' : 'relation-left','id'    : 'relation_' + i})
                    .append(condition)
                    .append(key)
                    .append($('<input />', {
                                 'class'  : 'relation-input',
                                 'id'     : 'constraint_' + i,
                                 'type' : 'text',
                                 'name'   : 'constraint[]',
                                 'data-provide' : 'typeahead',
                                 'data-items' : '2'
                             }));

    var right = $('<div />', {'class' : 'relation-right',
                            html : $('<buton />', 
                            {
                                'class' : 'btn',
                                'name' : 'btn[]',
                                'value': 'X'})
                            });

    var parent = $('<div />', {'class' : 'relation-parent_' + i})
                    .append(left)
                    .append(right);
    $("#relation_container").append(parent);
}

Answer 1

You are creating condition and key objects for select box. Use same objects instead of using id as select boxes not created yet so you cannot find them using id:

var i = 0;
    function add_relation()
    {
        i = i + 1;
        var condition = $('<select />', {
                                 'class'  : 'relation-select',
                                 'id'     : 'condition_' + i,
                                 'name'   : 'condition[]'
                             });

        var key = $('<select />', {
                                 'class'  : 'relation-select',
                                 'id'     : 'key_' + i,
                                 'name'   : 'key[]'
                             });
        //here use object directly instead of id
        $(key).append('<option value="">Select Key</option><option value="product_title">Title</option><option value="type">Type</option><option value="product_price">Price</option><option value="product_weight">Weight</option>');
        $(condition).append('<option value="">Select Condition</option>'+
                                                        '<option value="is_equal_to">Is Equal To</option>'+
                                                        '<option value="is_greater_than">Is Greater Than</option>'+
                                                        '<option value="is_less_than">Is Less Than</option>'+
                                                        '<option value="starts_with">Starts With</option>'+
                                                        '<option value="ends_with">Ends With</option>'+
                                                        '<option value="contains">Contains</option>');                           
        var left = $('<div />', {'class' : 'relation-left','id'    : 'relation_' + i}).append(condition).append(key).append($('<input />', {
                                 'class'  : 'relation-input',
                                 'id'     : 'constraint_' + i,
                                 'type' : 'text',
                                 'name'   : 'constraint[]',
                                 'data-provide' : 'typeahead',
                                 'data-items' : '2'

                             }));


        var right = $('<div />', {'class' : 'relation-right',html : $('<buton />', 
                                                                            {
                                                                            'class' : 'btn',
                                                                            'name' : 'btn[]',
                                                                            'value': 'X'})
                                                                    });


        var parent = $('<div />', {'class' : 'relation-parent_' + i}).append(left).append(right);
    $("#relation_container").append(parent);
    }