将搜索选项添加到选择列表

Question

我有两个多选列表，可以通过单击它们来相互交换列表值。 我试图将搜索功能添加到填充列表（选择列表）中，直到我单击列表元素时，该功能才能正常工作。 即使从列表中删除了该值，搜索选项仍会在其中添加该移动的元素。 检查演示（ http://jsfiddle.net/cs6Xb/99/ ）。

//code is:

//html-
<input id="someinput"><br/>
    <select class="select-cities" name="city" id="optlist" multiple="multiple">
        <option>Frederiksberg</option>
        <option>Vanløse</option>
        <option>Glostrup</option>
        <option>Brøndby</option>
        <option>Roskilde</option>
        <option>Køge</option>
        <option>Gentofte</option>
        <option>Hillerød</option>
        <option>Tårnby</option>
        <option>Vallensbæk</option>
    </select>
</input>
<br/>
<select class="chosen-cities" name="chosen-cities-name" multiple="multiple">
</select>

//jquery:

$(function() { var opts = $('#optlist option').map(function(){
    return [[this.value, $(this).text()]];
  });


   $('#someinput').keyup(function(){
     var rxp = new RegExp($('#someinput').val(), 'i');
     var optlist = $('#optlist').empty();
     opts.each(function(){
         if (rxp.test(this[1])) {
             optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
      }
  });

});



    $('.select-cities').click(function () { $('.select-cities option:selected').remove().appendTo('.chosen-cities');});

    $('.chosen-cities').click(function () {
    $('.chosen-cities option:selected').remove().appendTo('.select-cities');
    });

});
  I 

Answer 1

这是因为加载文档后，您已经在opts缓存了值，并且在opts内容更新时不会对其进行更新。

将项目从列表中移出后，您必须重新评估opts以获取新的一组值。

$('.select-cities').click(function () {
    $('.select-cities option:selected').remove().appendTo('.chosen-cities');
    opts = $('#optlist option').map(function () {
        return [[this.value, $(this).text()]];
    });
});

演示