2016-03-03 26 views
0

我想预先填入DATAS在选择2jQuery的选择2充液数据问题

下面是从服务器

https://jsfiddle.net/j6tv52s6/

我该怎么办预充到选择的反应?

​​

这里是我的[小提琴] [2]

下面是HTML

<input type="hidden" name='zipcode_covered' id='zipcodeCollection' value=""> 
<select class="js-data-example-ajax" style="width:100%" multiple="multiple" placeholder='Pincode'></select> 

下面是脚本:

function formatRepo(repo) { 
    if (repo.loading) return repo.text; 
    var markup = '<div class="clearfix">' + 
       '<div clas="col-sm-10">' + 
       '<div class="clearfix">' + 
       '<div class="col-sm-6">' + repo.zipcode + '</div>' + 
       '</div>' 
    markup += '</div></div>'; 
    return markup; 
} 

function formatRepoSelection(repo) { 
    var cur_val = $('#zipcodeCollection').val(); 
    if (cur_val) { 
    $('#zipcodeCollection').val(cur_val + "," + repo.zipcode); 
    } else { 
    $('#zipcodeCollection').val(repo.zipcode); 
    } 
    return repo.zipcode; 
} 

$(document).ready(function(){ 
    $(".js-data-example-ajax").select2({ 
    ajax: { 
     url: "getZipList", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     delay: 250, 
     data: function(params) { 
     return { 
      q: params.term, // search term 
      page: params.page 
     }; 
     }, 
     processResults: function (data, page) { 
     return { 
      results: data.items 
     }; 
     }, 
     cache: true 
    }, 
    escapeMarkup: function(markup) { return markup; }, // let our custom formatter work 
    minimumInputLength: 1, 
    templateResult: formatRepo, // omitted for brevity, see the source of this page 
    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page 
    }); 
}); 
+0

发布提问前请先做一个快速的搜索。 编号: http://stackoverflow.com/questions/29749891/populate-select2-with-ajax-data https://select2.github.io/announcements-4.0.html#removed-initselection –

回答

0

如果我理解你的问题正确..你想用服务器中的选项填充选择下拉菜单吗?

这里是你将如何使用Ajax做到这一点:

$.ajax({ 
     type: "POST", 
     url: ajaxUrl, 
     dataType: "json", 
     success: function (domain) { 
      $.each(domain.ZipCodes, function (index, value) { 
        $("#zipcodeDropdown").append(
         $("<option></option>").text(value.zipCode).val(value.zipId) 
        ); 
      }); 
     }, 
     error: function (event) { 
      ShowErrorLabel("ERROR in ajax call(" + ajaxUrl + "): \n" + "Error : " + event.status + " - " + event.statusText); 
     } 
    });