带有optgroup的select2的动态数据

Question

我想为用户创建动态字段以选择产品和数量。产品将使用select2。我试图在页面加载时加载数据，以便后续的选择框将被分配这些数据，而不会返回到服务器。

但是，我收到以下错误

No select2/compat/inputData

这是我的javascript

<script>
    jQuery.noConflict();
    (function( $ ) 
{
$(function() 
{
    var products = [];
    var count = 0;
    $.ajax(
    {
        url: 'url',
        success: function(response)
        {
            products = response;    
            $(".select2").select2({
          data: products
        });
        },
        dataType: 'jsonp'
    });

    $('#quote').on('click', function(e)
    {
        e.preventDefault();
        $('#quote-modal').modal()
    });

    function createGroup(name,type) 
    {
        count++;
        var input = document.createElement("input");
        $input = $(input);
        $input.addClass("form-control")
            .attr("type", type)
            .attr("name", 'product[' + count + '][' + name + ']');

        var group = document.createElement("div");
        $group = $(group);
        $group.addClass("col-lg-6")
            .append(label, input);

        return group;
    }

    $("#plusButton").click(
        function () {
            var newHorizontalForm = document.createElement("div");
            $(newHorizontalForm).append(createGroup("product","select"),
                    createGroup("quantity","number"))
                .addClass("form-horizontal");
                $("#prods").append(newHorizontalForm);
    });


     $("#minusButton").on('click', function(){
            this.parent.remove();
        });

});
})(jQuery);

此处来自jsonp请求的示例响应

 /**/jQuery11130034529731376096606_1461815768298([{"id":"","text":"Fresh Vegetables","children":[{"id":2,"text":"Carrots"},{"id":3,"text":"Lettuce"},{"id":4,"text":"Broccoli"},{"id":5,"text":"Spinach"},{"id":6,"text":"White Cauliflower"},{"id":7,"text":"Green Peas"},{"id":8,"text":"Celery"},{"id":9,"text":"Soybeans"},{"id":10,"text":"Mushroom"},{"id":11,"text":"Tomato"},{"id":12,"text":"Cabbage"},{"id":13,"text":"Brussels Sprout"},{"id":14,"text":"Onion"},{"id":15,"text":"Potato"}]},{"id":"","text":"Tropical Fruits","children":[{"id":16,"text":"Cherries"},{"id":17,"text":"Oranges"},{"id":18,"text":"Apples"},{"id":19,"text":"Pineapples"},{"id":20,"text":"Avocados"},{"id":21,"text":"Blueberries"},{"id":22,"text":"Raspberries"},{"id":23,"text":"Cranberries"},{"id":24,"text":"Blackberry"},{"id":25,"text":"Prune"},{"id":26,"text":"Pineapple"},{"id":27,"text":"Papaya"},{"id":28,"text":"Plantain"},{"id":29,"text":"Pumpkin"}]}]);

这是HTML

<form name="request-quote">
                <fieldset>
                    <legend>Contact Information</legend>
                    <div class="row">
                        <div class="col-lg-6">
                            <label class="label" for="name">Your Name</label><br>
                            <input type="text" name="name" class="input-xlarge"><br>
                        </div>
                        <div class="col-lg-6">
                            <label class="label" for="organisation">Organisation</label><br>
                            <input type="text" name="organisation" class="input-xlarge"><br>
                        </div>
                        <div class="col-lg-6">    
                            <label class="label" for="email">E-mail</label><br>
                            <input type="email" name="email" class="input-xlarge"><br>
                        </div>
                        <div class="col-lg-6">    
                            <label class="label" for="tel">Telephone</label><br>
                            <input type="text" name="tel" class="input-xlarge"><br>
                        </div>
                    </div>
                </fieldset>
                <fieldset> 
                    <legend>Products</legend>
                    <div class="row" id="prods">
                        <div class="col-lg-6"><strong>Product</strong></div><div class="col-lg-6"><strong>Quantity</strong></div>
                        <div class="col-lg-6"><input type="text" name="product[0][product]"  class="input-xlarge select2"></div>
                        <div class="col-lg-6"><input type="text" name="product[0][quantity]" class="input-xlarge"></div>
                    </div>
                </fieldset>
            </form>