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 に答える