Question

我正在使用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 中的这个怎么做？

Answer 1

根据文档，您必须使用 templateResult

选项

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

这样的事情应该这样做

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

＆＃13;

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
  })
});

＆＃13;

select {
  width: 250px;
}

＆＃13;

<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>

＆＃13;

此外，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;
}

选择2。 js v4.0：如何显示和格式化本地数组数据源？

1 个答案: