将搜索选项添加到选择列表(adding search option to the select list)

将搜索选项添加到选择列表(adding search option to the select list)

我有两个多选列表，可以通过单击它们来交换列表值。 我试图将搜索功能添加到填充列表（选择列表），这可以正常工作，直到我单击列表元素。 即使从列表中删除了值，搜索选项仍会在其中添加移动的元素。 查看演示（ 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

I have two multiselect lists that can interchange the list values with each other by clicking them. I tried to add search functionality to the filled list (select-list) which works fine until the move I click a list element. even though the value is removed from the list still the search option adds that moved element in it. Check the demo(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

最满意答案

这是因为您在加载文档后缓存了opts的值，并且在select更新时没有更新它。

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

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

演示

This is because you've cached the values in opts once document is loaded and is not updating it when the select gets updated.

You have to re-evaluate opts to get the new set of values once an item is moved from the list..

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

Demo