Jquery Select2 问题

Question

我使用的是 select2 4.0.3

我有 3 个选择..让我们称它们为 1、2 和 3。选择 2 取决于选择 1 上选择的值。选择 3 取决于选择 2 上选择的值

所有这些选择都在由 jquery 步骤插件创建的向导中，

我使用 templateResult 和 templateSelection 选项来格式化我的 ajax 结果

我编写了以下代码:

$("#1").select2({
    placeholder: '<spring:message  code="wzricper.step3.TipoPermesso" />',
    allowClear: false,
    minimumResultsForSearch: -1,
    ajax: {
        url: '${prelevaRaggruppamentiPermesso}',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                page: params.page,
                lang:'it'
                };
            },
        processResults: function (data, page) { 
            if( data.payload != null && data.payload.length )
            {
                return {
                    results: data.payload.sort(compareByDescrizione)
                    };
            }
            else
            {
                return {
                    results: []
                    };                      
            }
        },
        cache: false
        },
        escapeMarkup: function (markup) { 
                return markup;
                }, 
        templateResult: formatRepo, 
        templateSelection: formatRepoSelection
    }).on("select2:select", function (e) 
                {

                    viewSelectNumb2("select2:select", e); 
                }).on("select2:unselect", function (e) 
                    {
                        //Empty and disable select with id 2 
                    });


function viewSelectNumb2(name, evt) 
{
    //With or without this instruction behaviour is always the same     
    //evt.stopImmediatePropagation();
    $("#2").select2({
        placeholder:"<spring:message  code='wzricper.step3.Area' />",
        allowClear: false,
        minimumResultsForSearch: -1,
        ajax: {
            url: '${prelevaTipologiePermesso}',
            dataType: 'json',
            dropdownCssClass : 'bigdrop',
            delay: 250,
            data: function (params) {
                return {
                    page: params.page,
                        idTipoRaggruppamento: raggruppamentoPerm.id,
                        'idCivico': infoIndirizzo.idCivico,
                        codiceVia: infoIndirizzo.idVia,
                        lang:'it'
                  };
                },
            processResults: function (data, page) {
                if( data.payload != null && data.payload.length )
                    {
                    return {
                        results: data.payload.sort(compareByDescrizione)
                        };
                    }
                    else
                    {
                    return {
                        results: []
                    };                      
                    }
            },
            cache: false
            },
            escapeMarkup: function (markup) { 
                return markup; 
            }, 
              templateResult: formatRepo, 
              templateSelection: formatRepoSelection
            }).on("select2:select", function (e){
                //Call function to valorize select #3       
            }).on("select2:unselect", function (e) 
            { 
                //Empty and disable select #3
            });     
    }
    function formatRepo (repo) {
        console.log("FORMAT REPO: "+repo);
        if (repo.loading)
        {
            console.log("FORMAT REPO LOADING: "+repo.loading);
            return repo.text;
        }
            console.log("FORMAT REPO DESCRIZIONE: "+repo.descrizione);
            var markup = repo.descrizione;
            return markup;
        }


    function formatRepoSelection (repo) {

        console.log("FORMAT REPO SELECTION: "+repo);
        if( repo.text )
        {
            console.log("FORMAT REPO SELECTION TEXT: "+repo.text);
            return repo.text;   
        }
        console.log("FORMAT REPO SELECTION DESCRIZIONE: "+repo.descrizione);
        return repo.descrizione;
    }
    function compareByDescrizione(a, b)
    {
        if( a.descrizione < b.descrizione )
        {
            return -1;  
        }
        else if( a.descrizione > b.descrizione )
        {
            return 1;   
        }
        else
        {
            return 0;
        }
    }

我面临这个问题:一开始一切正常

然后，如果我在 select #1 中选择一个值，然后在 select #2 中选择一个值，然后我回来更改 select #1 中的值，我会在 select #2 中看到新值，但是当我选择一个值时，我看不到t看到选择的值如下图所示

基本上看来“onselect”方法根本没有被触发..我不明白原因任何提示都会很棒

谢谢

安杰洛

Answer 1

我明白了。问题如下:当ajax调用有新对象时，将调用change和select2:select方法

因此，我通过生成新的随机 ID 来更改代码:

.
.    
processResults: function (data, page) {
    if( data.payload != null && data.payload.length ) {
        return {
            results: $.map(data.payload.sort(compareByDescrizione), function(obj){
                var aResult = obj;
                aResult.idSri = obj.id;
                aResult.id = createGuid();
                return aResult;
            }) 
        };
    } else {
        return {
            results: []
        };
    }
},
.
.

其中 createGuid() 是:

function S4() {
    return (((1+Math.random())*0x10000)|0).toString(16).substring(1); 
}

function createGuid() {
    var guid = (S4() + S4() + "-" + S4() + "-4" + S4().substr(0,3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
    console.log("guid "+guid);
    return guid;
}

现在效果很好

安杰洛