1

我正在使用 select2.js V4.0 （不是 3.6 ！！！），我想显示和格式化 javascript 本地源：

var data_names = [{
  id: 0,
  text: "Henri",
  last_name: 'Barbusse'
}, {
  id: 1,
  text: "John",
  last_name: 'Lenon'
}, {
  id: 2,
  text: "Victor",
  last_name: 'Hugo'
}, {
  id: 3,
  text: "Marie",
  last_name: 'Stuart'
}, {
  id: 4,
  text: "Boriss",
  last_name: 'Vian'
}];

我的格式方法可以是例如：

function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = '<span class="my_class">' + item.text + ' ' + item.last_name + '</span>';
  return full_name;
}

你知道如何在v4.0中做到这一点吗？

4

1 回答 1

4

根据文档，您必须使用该选项templateResult

templateResult 函数应该返回一个包含要显示的文本的字符串，或者一个包含应该显示的数据的对象（例如 jQuery 对象）。它还可以返回 null，这将阻止选项显示在结果列表中。

像这样的事情应该这样做

$('select').select2({
  multiple: true,
  data: data_names,
  templateResult: name_format
});


function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = $('<span class="my_class">' + item.text + ' ' + item.last_name + '</span>');
  return full_name;
}
$(function() {
  var data_names = [{
    id: 0,
    text: "Henri",
    last_name: 'Barbusse'
  }, {
    id: 1,
    text: "John",
    last_name: 'Lenon'
  }, {
    id: 2,
    text: "Victor",
    last_name: 'Hugo'
  }, {
    id: 3,
    text: "Marie",
    last_name: 'Stuart'
  }, {
    id: 4,
    text: "Boriss",
    last_name: 'Vian'
  }];
  $('select').select2({
    multiple: true,
    data: data_names,
    templateResult: name_format
  })
});
select {
  width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet" />
<select></select>

此外，name_format 方法应该返回一个 DOM/jQuery 对象而不是字符串。

function name_format(item) {
  if (!item.last_name) {
    return item.text;
  }
  var full_name = $('<span class="my_class">' + item.text+ ' ' + item.last_name+'</span>');
  return full_name;
}
于 2015-07-25T10:54:27.437 回答