[英]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
這是因為加載文檔后,您已經在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()]];
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.