Question

我正在创建一个javascript函数，点击后会创建两个下拉菜单和一个文本框，并将html附加到容器div

但问题是，不知何故，它无法将oprions附加到两个下拉列表中。

这是我的剧本

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

您正在为选择框创建condition和key个对象。使用相同的对象而不是使用id作为尚未创建的选择框，因此您无法使用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);
    }

无法动态地将选项附加到选择下拉列表

1 个答案: