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

Question

我需要获取新创建的列表元素，以便我可以在提交时循环遍历它们。

让我们从 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>');
});

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

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

我应该如何以及在哪里监听新元素的创建？

编辑:

select 和 ul 是界面的一部分。在提交上，我想将新列表作为隐藏的输入附加到表单中，以便它们可以与整个表单一起序列化。

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);
});