提交时进入新创建的列表元素

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 s附加到表单，以便可以将它们与整个表单序列化。

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定位选定的option:selected 。

检查演示

$('#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);
});