javascript - 在多选中选择后搜索无法正常运行

Question

我在一个页面中有两个多项选择(选择城市和选择城市)，我可以来回传输选项。我已经为选择城市列表提供了搜索功能。一切都按照我的需要运行。

问题是，当我在一个搜索框中搜索并从列表中选择几个选项，然后移动到另一个搜索框并从第一个搜索框中删除键入的字母时，第二个搜索框不起作用。我是新手，因此不知道如何消除这个问题。我想它必须与“keyup()”函数做一些事情。

我执行了以下步骤:1.首先我在#someinput框中输入e，然后选择三个选项。 2. 这些值现在位于所选城市列表中。 3.现在我尝试搜索第二个搜索框而不删除我在第一个搜索框中输入的内容。这就是问题开始的地方。这是行不通的。

这是演示:http://jsfiddle.net/cs6Xb/131/

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()]];
    });
    opts1 = $('#optlist1 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);

    });
        $('#someinput1').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);

    });
    $('.select-cities').click(function () {
        $('.select-cities option:selected').remove().appendTo('.chosen-cities');
        opts = $('#optlist option').map(function () {
            return [[this.value, $(this).text()]];
        });
        opts1 = $('#optlist1 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()]];
        });
        opts1 = $('#optlist1 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;" />' );
    }
};

Answer 1

问题在于

 $(".hidden").toggleOption(false);

我根据相应的optlist更改了$(".hidden")选择器

$("#optlist .hidden").toggleOption(false);

和

$("#optlist1 .hidden").toggleOption(false);

Working Fiddle