0

select2 要素のサイズを変更しようとしていますが、正しく機能していないようです (ドロップダウンのサイズが正しく変更されていません)。私が検討して試したアプローチの 1 つは、.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);

            });


    });


});​

乾杯、そして助けてくれてありがとう！

4

1 に答える 1

0

解決しました！(開発者「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");
            }
             });


    });


});​
于 2012-10-04T16:42:35.580 に答える