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

Question

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

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

为什么会这样？如何在不丢失复选框的情况下填充选择？

Answer 1

您需要在这样的对象中包含selectOptions：

{ “标签 1”：134， “标签 2”：135， “标签 3”：136， }

然后你可以像这样遍历selectOptions：

$el = $('#param2');
$el.empty();

$.each(selectOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

$el.multiselect();  //change from html box to jquery