如何将预选选项保留在 selected.js 选择字段中

Question

我有一个多选框，我决定使用 selected.js，因为有数以千计的可能选项，所以它让用户更轻松。

到目前为止，选择选项是从数据库中预填充的，并且在页面加载时，表单会显示当前选择的选项，也来自数据库。

我的选择框代码在这里：

$('#skills_chosen').on('click change', function(){
    var items="";
    var typedOpt = $('#skills_chosen').val();
    $.getJSON("php/skillList.php", {term:typedOpt}, function(skillList){
    $.each(skillList,function(index,item) 
    {
      items+="<option value='"+item.skill+"'>"+item.skill+"</option>";
    });
    $("#skills").append(items); 
    $('.chzn-select').trigger("chosen:updated");
    });

    });  
});

这工作得非常好，使用以下代码预填充选择字段也是如此：

$(window).load(function(){
var myId = "3";     
   $.getJSON("php/getCanSkills.php",{canID:myId}, function(data) {
           for(i=0; i<data.length; i++) {
               var skillId = data[i].skill_id;
               var skillName = data[i].skill;
               console.log("Skill id: "+skillId+", Skill: "+skillName);
               $('.chosen-choices').prepend('<li class="search-choice">'+skillName+'<a class="search-choice-close" data-option-array-index="'+skillId+'"></a></li>'); 
               $('.chosen-choices').trigger("liszt:updated");
           }
   });
});

我的问题是，当用户想要添加到选择选项并开始输入时，原来的、动态加载的选项会消失，这意味着他们需要再次输入所有选项以及添加新技能。如何调整我的代码以保留加载到 .chosen-choices 字段中的选项，以便用户可以简单地将另一个技能添加到选项组？

Answer 1

我想通了。在我的 for 循环之后，我放置了以下代码：

            var preselected =  $('.chosen-choices').html();
            window.preselected = preselected.replace('<li class="search-field"><input value="Start typing..." class="default" autocomplete="off" style="width: 113px;" type="text"></li>', '');
            console.log(window.preselected);

然后在选择框代码的末尾（在 $('.chzn-select').trigger("chosen:updated"); 行之后）我放置了以下行：

$('.chosen-choices').prepend(window.preselected);

现在可以完美运行了。