0

私は自分のプロジェクトに Select2 を使用しており、大きな成功を収めています。

ドロップダウンでマークアップを大幅に変更するための最良のアプローチを誰かが知っているかどうか知りたいです。

たとえば、結果の下部に入力フィールドとボタンを追加したいと思います。

スクリーンショット

それはselect2にとって実行可能なタスクのように思えますか? それとも、そのための間違ったツールですか？現在、社内で開発されたプラグインを使用していますが、信頼性が低く、遅いです。

4

1 に答える 1

0

オプション:

<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

于 2013-06-12T14:41:23.837 に答える