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'）。触发器（“selected：updated”）; line）之后，我放置了以下行：

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

它现在完美无缺。

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

1 个答案: