替换下拉菜单多选内容

Question

我有两个下拉式多选框，其中填充了html内容，具体取决于来自数据集的调用和其他下拉列表。

例如：

  

第一次下拉：所有动物，鸟，狗。

     

第二次下拉：所有特征，爪子，喙，爪子，毛皮。

为了对第二个下拉列表进行排序，我一直.remove()给孩子们ul课程和.append()新的html孩子及其值。像这样

$.each(data, initDataSet);

function initDataSet(key, value) {

   if (value !== null && typeof value === "object") {
      $('.dropdown-content-traits').append("<li href='#' class='traitDropDownItem dropDownGeneral'>"+ value.name +"</li>");
   }
}    

现在的问题是我想在下拉列表中添加多选项，我在向每个列表项添加“选定”类时遇到问题，因为每次点击下拉列表时都会对内容进行排序。

不将html标记更改为：<select>和<option>什么是更有效的方式来管理下拉内容？