我在一个页面中有两个多选项(select-cities& selected-cities),我可以来回传输选项。我已将搜索功能提供给选择城市列表。一切都按照我的需要运作。
我还需要为所选城市列表添加搜索功能。有人可以建议我怎么做。我尝试使用相同的代码,但它没有工作。请建议解决方案。以下是演示:http://jsfiddle.net/cs6Xb/130/
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/>
<input id="someinput1"/><br/>
<select class="chosen-cities" name="chosen-cities-name" id="optlist1" multiple="multiple"></select>
jquery的:
$(function () {
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]));
} else{
optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
}
});
$(".hidden").toggleOption(false);
});
$('.select-cities').click(function () {
$('.select-cities option:selected').remove().appendTo('.chosen-cities');
opts = $('#optlist option').map(function () {
return [[this.value, $(this).text()]];
});
});
$('.chosen-cities').click(function () {
$('.chosen-cities option:selected').remove().appendTo('.select-cities');
opts = $('#optlist option').map(function () {
return [[this.value, $(this).text()]];
});
});
});
jQuery.fn.toggleOption = function( show ) {
jQuery( this ).toggle( show );
if( show ) {
if( jQuery( this ).parent( 'span.toggleOption' ).length )
jQuery( this ).unwrap( );
} else {
if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
}
};
答案 0 :(得分:0)
这是一个适用于可搜索选择列表的优秀jQuery插件。它被称为&#34; Chosen&#34; 。您可能会发现它很有用。
似乎你只为#someinput写了你的函数,但是没有写#someinput1。可能是问题
在这里,我已经更新了你的小提琴来解决问题。我所做的就是添加了#someinput1的功能。
$(&#39;#someinput1&#39;)。keyup(function(){
var rxp = new RegExp($('#someinput1').val(), 'i');
var optlist = $('#optlist1').empty();
opts1.each(function () {
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
} else{
optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
}
});
$(".hidden").toggleOption(false);
});
进行一些调整以填充第二个选择列表选项。
opts1 = $('#optlist1 option').map(function () {
return [[this.value, $(this).text()]];
});
看看