Функция jQuery. html () не сохраняет значения в выборках и вводы в динамических c DOM - PullRequest
Новая
       35

Функция jQuery. html () не сохраняет значения в выборках и вводы в динамических c DOM

0 голосов
/ 03 февраля 2020

У меня есть контент, сгенерированный PHP, но динамически измененный jQuery. DOM генерируется на основе выбора пользователя, и мне нужны все входные данные, выбирает et c. сохраняться, когда пользователь выбирает любую опцию, которая повторно генерирует DOM. Для этого я использую функцию .html(). Проблема в том, что копируются только те значения, которые были вставлены PHP. Значения, которые были установлены функцией .val() или введены самим пользователем, теряются при использовании .html(). Я пробовал даже функцию .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). Поэтому я использую функцию simliar для: 

$('#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?

1 Ответ

0 голосов
/ 03 февраля 2020

Причина в том, что вы вводите для l oop неправильно, $('#id').html работает, но для l oop, который вы пытаетесь запустить неправильно.

Для проверки удалить i <= $(this).val() часть в l oop, затем просто добавьте i<4, он будет работать нормально.

Решение вашей проблемы - сначала создать массив выбора, в on(Chnage) событии pu sh элемент к массиву типа 

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)
...