jquery - 使用 JQuery 创建 html 标签

Question

我需要使用 JQuery 在选择标签内创建选项标签，

这是选择标签：

<select id="tickets-room" style="height: 20px; width:200px; display: inline-block; margin-top:30px;" onchange="refreshRooms(this.value);">
</select>

每个选项标签都需要一个 ID，例如 1,2,3,4

每个选项标签都应该收到“resp[].key”作为它的文本。

我不知道这是否有意义，但我不知道如何很好地解释它，这是我拥有的一些我需要的元素的代码。resp.key 是我需要作为选项标签内的文本的名称，resp.value 是我需要放置在选择标签外的按钮上的 url。

function refreshRooms(city){
    $.ajax('/services/tickets/<%= movieId %>?city=' + city).done(
        function(resp){
            alert(resp.length);
            console.log(resp[0].key + " " + resp[0].value); 
        }
    );      
}

Answer 1

使用jQuery.append()：

function refreshRooms(city){
    $.ajax('/services/tickets/<%= movieId %>?city=' + city).done(
        function(resp){
            var sel = $("#tickets-room");

            for (var i = 0; i < resp.length; i++) {
                sel.append('<option value="' + resp[i].key + '">' + resp[i].value + '</option>');
            }
        }
    );      
}

Answer 2

您可以使用以下语法创建新元素：

$('<option></option>');

然而，这个元素无处不在。它尚未添加到 DOM，因此不可见。您需要为此使用append方法或appendTo方法。它看起来像：

$('#tickets-room').append( $('<option></option>').attr( {'id':i,'value':resp[i].key} ).html( resp[i].key ) );

Answer 3

function refreshRooms(city){
    var jqTickers = $('#tickets-room');
    $.ajax('/services/tickets/<%= movieId %>?city=' + city)
        .done(function(resp){
            $.each(resp, function() {
                jqTickers.append($('<option value="' + this.key + '">' + this.value + '</option>')
            });
        });
    });      
}