Question

我需要访问新创建的列表元素，因此我可以在submit上遍历它们。

让我们开始select并空ul：

<select name="car" id="js_car_select">
    <option value="1">BMW</option>
    <option value="2">Audi</option>
</select>

<ul id="js_car_list"></ul>

和一些基本的jQuery：

// Append car name to the list on select change
$('#js_car_select').on('change', function() {
    $('#js_car_list').append('<li>' + $(this).find('option:selected').text() + '</li>');
});

在此之后，我将汽车列表作为新创建的元素。

如何在submit上找到他们？现在，当我尝试时，没有新的li元素可用 - $('#js_car_list li').length = 0.

我应该如何以及在何处收听新元素的创作？

修改

select和ul是界面的一部分。在submit我想将新列表作为隐藏input附加到表单，以便可以使用整个表单序列化。

Answer 1

你必须替换

$('#js_car_list').append('<li>' + $(this).text() + '</li>');

与

$('#js_car_list').append('<li>' + $(this).find('option:selected').text() + '</li>');

因为$(this)引用<select>元素。

因此，为了仅附加所选选项，您必须使用option:selected定位所选选项。

检查DEMO

$('#js_car_select').on('change', function() {
    $('#js_car_list').append('<li>' + $(this).find('option:selected').text() + '</li>');
});

$(document).on('click', '#submit', function() {
    var list = [];    
    $('#js_car_list > li').each(function() {
        list.push($(this).text());
    });
    // append the list items where ever you want .. 
    alert(list);
});

在提交时获取新创建的列表元素

1 个答案: