select.empty()删除select下拉列表的其他属性

我正在使用带有复选框的多选下拉菜单: https://www.jqueryscript.net/form/jQuery-Plugin-For-Multi-Select-Checboxes-multiselect.html . 我正在使用flask,并且正在实现动态选择:当一个发生变化时,它会触发一个变化事件,另一个也会发生变化。 填充选择时,它看起来像这样:

<form action="/get_plot">
<div style="float: left">
<br><b>Param1</b><br>
<select name="param1" multiple="multiple" id="param1" style="width:150px">
    {% for p in param1_list %}
            {% if p in current_param1 %}
                    <option selected value="{{ p }}">{{ p }}</option>
            {% else %}
                    <option value="{{ p }}">{{ p }}</option>
            {% endif %}
    {% endfor %}
    </select>
    </div>

一切正常,看起来像这样:

但是,当我触发on change事件时,我会执行$(“#param2”).empty();并再次填充

$("#param2").append(
$("<option></option>")
.attr("value", selectOptions[i][0])
.text(selectOptions[i][1])
              );

然后,复选框消失了,结果如下:

也许重要的是要知道:我用

 selectOptions = JSON.parse(selectOptions)

为什么会这样,我如何在不丢失复选框的情况下填写选择?