Выбранный параметр исчезает при нажатии кнопки

Question

У меня есть файл template.php, который содержит функцию JS, чтобы добавить на страницу некоторые параметры раскрывающегося списка, чтобы пользователь мог добавить столько же параметров, сколько пожелаете. Моя проблема в том, что если пользователь выбрал некоторые опции в этих блоках выбора, а затем нажимает кнопку «добавление», чтобы добавить дополнительные поля, выбранные ранее параметры очищаются (поэтому каждое выпадающее меню на странице сбрасывается до 00:00). Я хотел бы знать, что вызывает сброс настроек и как я могу обойти эту проблему.

$("#addsunday").click(function() { 
     var htmlstring = "<div class='shiftwrapper'>"; 
     htmlstring += "<select data-col-id='start' form='newtemplateform'>"; 
     htmlstring += "<?php 
          for($hours=0; $hours<24; $hours++) // the interval for hours is '1' 
           for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30' 
            echo '<option>'.str_pad($hours,2,'0',STR_PAD_LEFT).':' 
                .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';?>"; 
     htmlstring += "</select>"; 
     htmlstring += "<select data-col-id='finish' form='newtemplateform'>"; 
     htmlstring += "<?php 
          for($hours=0; $hours<24; $hours++) // the interval for hours is '1' 
           for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30' 
            echo '<option>'.str_pad($hours,2,'0',STR_PAD_LEFT).':' 
                .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';?>"; 
     htmlstring += "</select>"; 
     htmlstring += "<select data-col-id='loc' form='newtemplateform'>"; 
     htmlstring += "<?php foreach($locations as $location){ print '<option value=\"$location\">' . $location . '</option>\n'; }?>"; 
     htmlstring += "</select>"; 
     htmlstring += "<button class='removeshift'>Remove Shift</button><br/>"; 
     htmlstring += "</div>"; 
     document.getElementById('sundaywrap').innerHTML += htmlstring; 
     console.log("Sunday clicked"); 

    }); 

Прошу прощения, если это действительно неэффективный способ повторить код, я все еще участвую. Вот очень плохая скрипка: https://jsfiddle.net/L7npxvzp/ Не работает, однако вы можете видеть структуру работы выпадающих меню. Есть кнопка для добавления дополнительных выпадающих списков, именно когда эта кнопка нажата, чтобы ранее измененные настройки возвращались к значениям по умолчанию.

Answer 1

Проблема эта линия:

document.getElementById('sundaywrap').innerHTML += htmlstring; 

Это заменяет элементы DOM в #sundaywrap с новыми элементами DOM, которые приходят из разбора HTML после того как вы сцепляются htmlstring. Любое динамическое состояние в старых элементах DOM, таких как выбранные элементы из меню, теряется.

Вместо конкатенации в HTML, вы должны добавить к DOM:

$("#sundaywrap").append(htmlstring);