Добавление нового выбора на страницу с помощью innerHTML приводит к тому, что ранее добавленные элементы выбора теряют любое значение, выбранное пользователем из раскрывающихся списков. - PullRequest
Новая
       6

Добавление нового выбора на страницу с помощью innerHTML приводит к тому, что ранее добавленные элементы выбора теряют любое значение, выбранное пользователем из раскрывающихся списков.

0 голосов
/ 04 октября 2018

Я столкнулся со странной проблемой со страницей, которая добавляет серию выпадающих списков на страницу, используя манипуляции с Javascript DOM (innerHTML).

Я добавляю новое раскрывающееся меню при нажатии кнопки с кодом, эквивалентнымthis: 

  html = `<select class="selector">
            <option value="">No value selected</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
          </select>`;
  containerDOMElement.innerHTML += html;

Когда таким способом на страницу добавляется новый выпадающий список, я вижу любые другие варианты выбора, где выбор был сделан пользователем, и его значения очищаются.

Я воспроизвел проблему в этом jsfiddle .

Чтобы увидеть проблему, вручную выберите вариант B из первого и третьего раскрывающихся списков после загрузки страницы.Теперь нажмите «добавить еще» и обратите внимание, что первый и третий раскрывающиеся списки утратили свой выбор.

Кто-нибудь знает, почему это происходит, и как я могу получить раскрывающиеся списки, чтобы сохранить их значение при добавлении нового?

1 Ответ

0 голосов
/ 04 октября 2018

Эта строка:

containerDOMElement.innerHTML += html;

Имеет ту же функциональность, что и эта строка:

containerDOMElement.innerHTML = containerDOMElement.innerHTML + html;

По-другому вы можетевидим, что весь HTML перестраивается, таким образом теряя выбранные в данный момент параметры.

Вместо этого, чтобы добавить HTML, мы можем использовать insertAdjacentHTML .В вашем случае:

containerEl.insertAdjacentHTML('beforeend', html);

Вот рабочая версия вашего JSFiddle: 

let existing_options = [
    "A","B","C"
];

let containerEl = document.getElementById("container");

let count = 0;

function addSelect(preselectOptionB=false) {
    html = `<select class="selector" name=${count}><option value="">No value selected</option>`;
    existing_options.forEach(function (dataValue,index)
    {
        html += `<option value=${dataValue} ${(preselectOptionB && dataValue=="B") ? 'selected="selected"' : ""}>${dataValue}</option>`;
    });
    html += `</select><br/>`;
    
    count++;
    containerEl.insertAdjacentHTML('beforeend', html);
}

function addNewSelectWithNoValue() {
    addSelect(false);
}

let button = document.getElementById("addbutton");
button.addEventListener('click', addNewSelectWithNoValue);

// add four initial ones.
addSelect();
addSelect(true);
addSelect();
addSelect(true);
<div id="container"></div>
<hr/>
<button id="addbutton">Add another</button>
...