Question

我试了很多东西。我无法初始化默认选定的项目。值总是＆＃34;未定义＆＃34;。

有人可以帮助我吗？

我创建了de select2，并添加了select的选项。

var selected = [{
    "id": 50270924,
    "full_name": "zquestz/s",
    "description": "Open a web search in your terminal.",
    "language": "Go"
        }, {
    "id": 30494317,
    "full_name": "haosdent/s",
    "description": "s is a tool for ssh like z for cd",    
    "language": "Shell"
    }];

var $gitElement = $(".select2").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, page) {
      return {
        results: data.items
      };
    },
    cache: true
  },
  data:selected,
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: function(repo) {
    console.log("res", repo, this);
    return '<div class="select2CompanyName">'+repo.full_name+'</div>' +
           '<div class="select2CompanyTitle">'+repo.language+'</div>' +
           '<div class="select2CompanyTitle">'+repo.description+'</div>';
  },
  templateSelection: function(repo) {
    console.log("sel", repo, this);
    return '<div class="select2CompanyResult">' +
        '<div class="select2CompanyName">'+repo.full_name+' <br>'+ repo.language +'</div>' +
        '<i class="fa fa-pencil-square-o"></i>' +
            '</div>';
  }
});

for(var i in selected) {
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected"></option>');
}

$(".select2").trigger("change");

此版本： jsfiddle

丑陋的解决方案是：

for(var i in selected) {
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected">'+JSON.stringify(selected[i])+'</option>');
}

here 工作，但丑陋

Answer 1

有一种简单的方法可以修复它，你只需要将模板逻辑移动到processResults，代码应该是这样的：

function displayItem(repo) {
return {
    id : repo.id,
  text : '<div class="select2CompanyName">'+repo.full_name+'</div>' +
       '<div class="select2CompanyTitle">'+repo.language+'</div>' +
       '<div class="select2CompanyTitle">'+repo.description+'</div>'
};
}

....

processResults: function (data, page) {
      return {
        results: $.map(data.items, displayItem);
      };
    },

我花了一些时间来找到问题..我将select2版本升级到4.0.2。检查小提琴here

select2使用ajax加载和自定义模板设置初始值

1 个答案: