Question

我一直在为我的项目使用Select2取得了巨大的成功。

我想知道是否有人知道在下拉列表中对标记进行重大修改的最佳方法。

例如，我想在结果的底部添加一个输入字段和一个按钮。

screenshot

对于select2来说，这似乎是一个可行的任务吗？或者这是一个错误的工具？目前我使用的是内部开发的插件，但它并不可靠且速度慢。

Answer 1

选项：

<style>
#s2id_test
{
    width: 200px;
}
.addedDiv
{
    padding-left: 10px;
    padding-right: 10px;
}
.addedDiv input
{
    display: inline-block;
    width: 120px;
}
.addedDiv button
{
    display: inline-block;
    width: 40px;
}
</style>



<body>
<select id="test">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
    <option value="4">Test 4</option>
    <option value="5">Test 5</option>
</select>
<script>
(function ($) {

/**
* @function
* @property {object} jQuery plugin which runs handler function once specified element is inserted into the DOM
* @param {function} handler A function to execute at the time when the element is inserted
* @param {bool} shouldRunHandlerOnce Optional: if true, handler is unbound after its first invocation
* @example $(selector).waitUntilExists(function);
* https://gist.github.com/buu700/4200601
*/

$.fn.waitUntilExists    = function (handler, shouldRunHandlerOnce, isChild) {
    var found       = 'found';
    var $this       = $(this.selector);
    var $elements   = $this.not(function () { return $(this).data(found); }).each(handler).data(found, true);

    if (!isChild)
    {
        (window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] =
            window.setInterval(function () { $this.waitUntilExists(handler, shouldRunHandlerOnce, true); }, 100)
        ;
    }
    else if (shouldRunHandlerOnce && $elements.length)
    {
        window.clearInterval(window.waitUntilExists_Intervals[this.selector]);
    }

    return $this;
}

}(jQuery));
$(document).ready(function(){
    $('#test').select2();

    $('#test').on("open", function() {
        if (!$('.addedDiv',$('.select2-drop-active')).is('*'))
        {
           $('.select2-drop-active').waitUntilExists(function(){$('.select2-drop-active').append('<div class="addedDiv"><input type="text"><button onclick="add(this)">Add</button></div>')});
        }
    });
 });
 function add(btn)
 {
    if($(btn).prev().is('input'))
    {
        $('#test').append('<option value="'+$($(btn).prev()).val()+'">'+$($(btn).prev()).val()+'</option>');
        $('#test').select2('close');
        $('#test').select2('open');
    }
 }
</script>

经过测试的win32宽度：chrome，firefox，IE

有没有办法在另外的标记中包装Select2中的结果？

1 个答案: