Question

我正在尝试更改select2元素的大小，但它似乎没有正常工作（下拉列表未正确调整大小）。我考虑并试过的一种方法是在.open上使用preventDefault（），但是如何在动画完成后获得默认甚至触发？我也试图隐藏然后显示select2下拉列表，但似乎无法让它工作。我有一个jsFiddle，以及这里的代码，请帮助：）

jsFiddle：http://jsfiddle.net/acpFh/2/ （如您所见，单击select2字段可调整顶部，但不会调整下拉列表）

代码：

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            function(){ // complete
                $s2SearchBox.width(300);

            });


    });


});

干杯，并提前感谢您的帮助！

Answer 1

解决！（感谢开发人员“ivaynberg”本人）。

https://github.com/ivaynberg/select2/issues/469

http://jsfiddle.net/acpFh/6/

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            {step: function() {
                $searchBox.select2("positionDropdown");
              },
            complete: function() {
                $searchBox.select2("positionDropdown");
            }
             });


    });


});

Select2 jQuery动画调整大小（用jsFiddle！）;我们可以以某种方式延迟默认事件或使其正确调整大小？

1 个答案: