Javascript 修改后无法搜索multiselect

我在一个页面中有两个多选项，我需要将第一个选项中的一些选项转换为第二个选项，同时保持搜索功能

问题是，当我使用搜索输入时，它会将选择恢复为其原始选项

以下是jquery搜索功能：

jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').each(function() {
            options.push({value: $(this).val(), text: $(this).text()});
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,"gi");

            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append(
                        $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });
    });
};

这是js小提琴：

*我相信问题在于期权变量，但不知道如何解决它*

---

谢谢

我已经更新了小提琴

我已经更新了右转和左转的代码。您必须更改过滤器中的选项数组本身，在dom中添加它们将不起作用。在更改后的代码中，一个问题是，一旦我们从右向左或从左向右添加，它将添加到目标选择的最后一个位置

请检查并让我知道这是否是您想要的

下面是主要的更改功能。我想稍后您可以创建一个公共函数。代码可以更优化

$('[id^=\"btnRight\"]').click(function (e) {

        var selected = $(this).parent().prev('select');
        var target = $(this).parent().next('select');

        target.find('option[value="999"]').remove()

        var options = selected.data('options');      
        var selectedVal = selected.find('option:selected').val()    

        var tempOption = [];
        $.each(options, function(i) {
                var option = options[i];
                if(option.value != selectedVal) {
                   tempOption.push(option);
                }
            });

        var targetOptions = target.data('options'); 
        targetOptions.push({value: selected.find('option:selected').val(), text:   selected.find('option:selected').text()});        
         target.data('options', targetOptions);

        selected.find('option:selected').remove().appendTo('#isselect_code');
        selected.data('options', tempOption);
    });

    $('[id^=\"btnLeft\"]').click(function (e) {

        var selected = $(this).parent().next('select');
        var target = $(this).parent().prev('select');

        var options = selected.data('options');      
        var selectedVal = selected.find('option:selected').val()    

        var tempOption = [];
        $.each(options, function(i) {
                var option = options[i];
                if(option.value != selectedVal) {
                   tempOption.push(option);
                }
            });
        if( tempOption.length == 0 )
        {
            // add 999 here
        }

        var targetOptions = target.data('options'); 
        targetOptions.push({value: selected.find('option:selected').val(), text:   selected.find('option:selected').text()});        

         target.data('options', targetOptions);


        selected.find('option:selected').remove().appendTo('#canselect_code');;
        selected.data('options', tempOption);
    });

---

代码的问题在于，单击“BTN右键”或“BTN左键”后，每个“选择”的选项集合都没有更新，因此请在单击每个按钮后尝试调用filterByText，如下所示：

  $('[id^=\"btnRight\"]').click(function (e) {
        $(this).parent().next('select').find('option[value="999"]').remove()
        $(this).parent().prev('select').find('option:selected').remove().appendTo('#isselect_code');
        $('#canselect_code').filterByText($('#textbox'), true);
        $('#isselect_code').filterByText($('#textbox1'), true)

    });

    $('[id^=\"btnLeft\"]').click(function (e) {

        $(this).parent().next('select').find('option:selected').remove().appendTo('#canselect_code');
         $('#canselect_code').filterByText($('#textbox'), true);
         $('#isselect_code').filterByText($('#textbox1'), true)
 });

---

但是，右选择框有一个问题。所有选项都叠加在一起，而不是一次显示一个。请别忘了赏金。我在Stackoverflow的第一笔赏金。谢谢没问题，我不能马上给悬赏，但24小时后，stackoverflow规则..你也能帮我选择正确的选择框吗？左边的那个很好用！但正确的答案根本不是：谢谢！好啊对不起，我不知道。请让我知道你在那里看到了什么问题？编辑：搜索时效果很好…但可能用户不会总是搜索…手动添加时，它不起作用！再次感谢！这不起作用，因为选项将用空数组更新