Question

我有一个文件template.php，它包含一个JS函数，用于向页面添加一些下拉框选项，因此用户可以根据需要添加更多选项。我的问题是，如果用户在这些选择框中选择了一些选项，然后按下＆＃34; addsunday＆＃34;按钮添加更多框，以前选择的选项被清除（因此页面上的每个下拉菜单都重置为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;

这会将#sundaywrap中的DOM元素替换为在连接htmlstring之后解析HTML的新DOM元素。旧DOM元素中的任何动态状态（例如菜单中的选定项）都将丢失。

不应连接到HTML，而应附加到DOM：

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

按下按钮时，所选选项消失

1 个答案: