Javascript 在multiselect中选择后搜索功能不正常

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

问题是，当我在一个搜索框中搜索并从列表中选择几个选项，然后在另一个搜索框中移动两个选项，并从第一个搜索框中删除键入的字母时，第二个搜索框不起作用。我是一个新手，因此不知道如何消除这个问题。我想这和keyup函数有关

我执行了以下步骤： 1.首先，我在输入框中键入e，并选择了三个选项。2.这些值现在位于“选定城市”列表中。3.现在我尝试搜索第二个搜索框，但没有删除我在第一个搜索框中键入的内容。这就是问题的起点。这行不通

这里是演示：

html:

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;" />' );
    }
};

问题在于

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

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

及

---

嗯，第二个搜索框根本不起作用…不需要在第一个框中输入文本…O.O.它实际上应该做什么。。？筛选第一个选择？@TilwinJoy:是。当您从第一个multiselect中移动一些值时，第二个搜索框将起作用。试一下我在问题中提到的步骤。你会发现问题的。嗯，对我来说很好。我可以同时使用两个搜索框，即使在使用第一个搜索框之后，第二个搜索框也可以。我是否误解了这个问题？它在不删除第一个框中的字符串的情况下工作。@IvyLynx:manu值是如何选择的？“我想我无法沟通这个问题。”Kunal lots-尝试了3次以上，比如5-6次。非常感谢，先生。它在chrome中也能完美工作。@Kunal很乐意帮忙：

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

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

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