Jquery Select2问题

Question

我正在使用select2 4.0.3

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

所有这些选择都在由jquery steps plugin和

创建的向导中

我正在使用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来改变我的代码：

$('element').filter('.class1:not(.class2):visible[rel="foo"]')

$('element').is('.class1').not('.class2').is(':visible').filter('[rel="foo"]')的位置：

.
.    
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: []
        };
    }
},
.
.

现在效果还不错

安吉洛