Question

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

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

这是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小提琴：http://jsfiddle.net/C2XXR/！

* 我认为问题在于选项变量，但不知道如何解决它*

谢谢！

Answer 1

我已经更新了小提琴。 http://jsfiddle.net/C2XXR/2/

我更新了左右传输的代码。你必须更改选项数组本身得到的过滤器，在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);
    });

Answer 2

您的代码存在的问题是，点击btnRight或btnLeft后，您的每个select的选项集都未更新，请点击每个按钮点击您的{ {1}}如下：

filterByText

修改后无法搜索多选

2 个答案: