jQuery.html() 函數不保留動態 DOM 中選擇和輸入中的值

Question

我有由 PHP 生成的內容，但由 jQuery 動態更改。 DOM 是根據用戶的選擇生成的，當用戶選擇任何重新生成 DOM 的選項時，我需要保存所有輸入、選擇等。 為此，我使用.html()函數。 問題是只復制由 PHP 插入的值。 由.val()函數設置或由用戶自己輸入的值在使用.html()時會丟失。 我什.clone()嘗試了.clone()函數，但結果是一樣的。

我的 DOM 類似於：

<div id="number_of_persons">
    <select>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div id="placeholder">
    <div id="person1">
        Name: <select><option value="">Name A</option><option value="">Name B</option></select>
        <div id="person1_placeholder">... another dynamically generated inputs ...</div>
    </div>
    <div id="person2">
        Name: <select><option value="">Name A</option><option value="">Name B</option></select>
        <div id="person2_placeholder">... another dynamically generated inputs ...</div>
    </div>
</div>

當用戶更改人數時，例如從 2 到 3，我需要保存第一個和第二個（是的，在這種情況下的解決方案是使用.append() ，但真正的 DOM 非常復雜，整個#placeholder需要重生）。 所以我使用的功能類似於：

$('#number_of_persons').on('change', function() {
    var html = '';
    for(var i = 1; i <= $(this).val(); i += 1) {
        html += '<div id="person' + i + '">';
        html += 'Name: <select><option value="">Name A</option><option value="">Name B</option></select>';
        // the line below is the problem, because all selects and inputs lost their values set by user or via jQuery .val() function
        html += '<div id="person' + i + '_placeholder">' + ($('#person' + i + '_placeholder').html() || '') + '</div>';
        html += '</div>';
    }
    $('#placeholder').html(html);
});

如何確保從#personX_placeholder選擇和輸入中復制值？

Answer 1

原因是您執行的 for 循環錯誤， $('#id').html確實有效，但是您試圖運行錯誤的 for 循環。

要檢查循環中的 remove i <= $(this).val()部分，然后只需添加i<4正常工作。

您的問題的解決方案是首先創建一個選擇數組，在on(Chnage)事件中將元素推送到數組中

selArry.push((this).val());

然后使用

    for(let x in selArry){
html += '<div id="person' + selArry[x] + '">';
        html += 'Name: <select><option value="">Name A</option><option value="">Name B</option></select>';
        // the line below is the problem, because all selects and inputs lost their values set by user or via jQuery .val() function .....
        html += '<div id="person' + selArry[x] + '_placeholder">' + ($('#person' + i + '_placeholder').html() || '') + '</div>';
        html += '</div>';
    }

最后你可以使用，

$('#placeholder').html(html)