动态创建下拉列表，jquery无法正常工作

Question

我尝试使用javascript / jquery创建下拉列表。以下是我使用的代码：

var trucks = response.trucks; //response from ajax request, value is 4 truck objects
var rt = $("#route_"+response.route_id);
    rt.append("<select class=\"email_route_dd\" name=\"timeslot\">")
    for(var ii = 0; ii <trucks.length; ii++){ 
        var t = trucks[ii]; //truck object
        if(ii+1 == trucks.length){
            console.log("Last"); 
            rt.append("<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>"); 
        }else{
            rt.append("<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>"); 
        }
    }; 
rt.append("</select>"); 

此代码输出以下代码：

上面的图片是我用Chrome检查元素时得到的图像。

请求后输出未显示下拉内容。 Dropbox就在那里，但其中没有任何内容。

Answer 1

请尝试这种方式：

var rt = $("#route_"+response.route_id), 
    $select = $("<select>", {'class' : 'email_route_dd', 'name':'timeslot'}); //Create select as a temp element and append options to this.

    for(var ii = 0; ii <trucks.length; ii++){ 
        var t = trucks[ii]; //truck object
             option = "<option name=\"\" class=\"driver\" value=\""+t.truck_id+"\" email=\""+t.driver_email+"\">"+t.driver+"</option>"; 

        $select.append(option);
    }; 
rt.append($select); 

或者这样，使用data- *属性和array.map以及更多可重用。

var rt = $('body'),
    $select = $("<select>", {
        'class': 'email_route_dd',
            'name': 'timeslot'
    }); //Create select as a temp element and append options to this.

$select.append($.map(trucks, function (t) {
    return $('<option>', {
            'class': 'driver',
            'value': t.truck_id,
            'data-email': t.driver_email,
            'text': t.driver
    });
}));

rt.append($select);

有了这个，你最后只追加到DOM而不是循环。

<强> Demo

Answer 2

您向元素追加<select>。然后，您不会将<option>标记附加到<select>，而是将它们附加到同一元素

尝试：

rt.find('select')append("<option name...