Question

Hello Select2社区，

我两天来一直在努力解决这个问题。我正在尝试将select2搜索框与其下拉结果列表分开。

我不想改变行为，而是改变下拉列表的位置和宽度。

我尝试设置dropdownParent选项（使用静态位置），它实际上更改了DOM父级，但没有更改页面上的位置。

我尝试使用CustomAttachContainer重载AttacheContainer而没有任何成功。

    $.fn.select2.amd.require([
    "select2/utils",
    "select2/dropdown",
    "select2/dropdown/attachContainer",
    "select2/dropdown/search"
], function (Utils, DropdownAdapter, AttachContainer, DropdownSearch) {
    function CustomAttachContainer(decorated, $element, options) {
        decorated.call(this, $element, options);
    }

    CustomAttachContainer.prototype.position =
            function (decorated, $dropdown, $container) {
                var $dropdownContainer = $("body").find('#y');  //just changed this line
                $dropdownContainer.append($dropdown);

                $dropdown.addClass('select2-dropdown--below');
                $container.addClass('select2-container--below');
            };

    var CustomAdapter = Utils.Decorate(
            Utils.Decorate(
                    DropdownAdapter,
                    DropdownSearch
            ),
            CustomAttachContainer
    );

    $("#x").select2({
        width: "500px",
        dropdownAdapter: CustomAdapter
    });
})

<body>
<select id="x" style="width: 200px;" ></select>
<div>
    <div id="y" style="position: absolute; width: 400px; height:20px; background-color: black"></div>
</div>
</body>

实际上我不确定哪个适配器需要重载或我需要使用哪个选项。我可以感受到插件的高定制潜力，但却无法利用它。

实现它的正确方法是什么？

非常感谢任何帮助！

select2版本：4.0.0 相关帖子： https://github.com/select2/select2/issues/3303 https://gist.github.com/timkelty/ae79d180acc9d3054e02

选择2 - 更改下拉列表的位置

0 个答案: