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