提交時進入新創建的列表元素

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