Question

目前正在尝试在旧应用中使用Select2。我可以成功激活旧下拉列表并将其转换为Select2下拉列表。一切正常。下拉列表已填满，相关功能仍在运行。但是，我试图做一些更先进的事情。

在旧的下拉列表中，每个选项都有自定义属性。

<option onlyslave="True" ...> ...</option>

现在，如果onlyslave属性为true，我希望文本颜色为红色。如果它是假的，它应该保持黑色。我已经知道如何将文本设置为红色，使用：

.select2-results { 
  color: red;
}

这显然会使Select2下拉列表中的每个结果变为红色。我想添加一个属性[onlyslave =＆＃34; true＆＃34;]会解决它，但事实并非如此。以下片段并没有变成任何红色，尽管事实上这个“老字号”并没有变成红色。屏幕后面的下拉菜单有False＆amp; amp;真相。资本＆＃39;真相＆＃39;或者说真话＆＃39;在这里没有任何区别。

.select2-results[onlyslave="true"] { 
  color: red;
}

有谁知道我怎么能做到这一点？我发现Select2文档有点乏善可陈。我目前正在使用Select2 4.0.5，但可能会降级。

Answer 1

正如我在评论中提到的，您需要使用templateResult属性来构建元素，并考虑onlyslave属性，例如

HTML

<select>
  <option onlyslave="True">Option 1</option>
  <option onlyslave="False">Option 2</option>
  <option onlyslave="False">Option 3</option>
</select>

CSS

.select2-results span[onlyslave="True"] { 
  color: red;
}

的JavaScript

function formatState (state) {
  if(!state.element) return;
  var os = $(state.element).attr('onlyslave');
  return $('<span onlyslave="' + os + '">' + state.text + '</span>');
}

$(document).ready(function() {
    $('select').select2({
      templateResult: formatState
    });
});

Codepen示例：https://codepen.io/anon/pen/gXByeK

Answer 2

这是working fiddle，其中显示了如何完成您的要求。如前所述，您需要使用select2的templateResult功能。 Select2的工作原理是隐藏原始selectand构建并显示自定义版本。此自定义版本没有原始选择中的onlyslave属性，这就是您的css选择器无法定位它的原因。

HTML

<select class="js-example-basic-single" name="state">
  <option onlyslave="True">test</option>
  <option>test 2</option>
</select>

的JavaScript

function formatState (state) {
  if (!state.id) {
    return state.text;
  }

  var $state
  if(state.element.attributes.onlyslave && state.element.attributes.onlyslave.value == "True"){
    $state = $('<span class="redtext">'+ state.text+ '</span>');
  }

else {
  $state = $('<span>'+ state.text+ '</span>');
 }
  return $state;
};


$('.js-example-basic-single').select2({
  templateResult: formatState
});

无法使用自定义属性

2 个答案: