Currently trying to use Select2 in an old app. I can successfully activate the old dropdown and turn it into a Select2 dropdown. All works fine. The dropdown is filled up and related functions are still working. However, I'm trying to do something a bit more advanced.

In the old dropdown, every option has a custom attribute.

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

Now, if the onlyslave property is true, I want the text color to be red. If it's false, it should remain black. I already know how to set the text to red, using this:

.select2-results { 
  color: red;
}

That obviously turns every result in the Select2 dropdown red. I thought adding an attribute [onlyslave="true"] would solve it, but it does not. The following snippet doesn't turn anything red, despite the fact that the 'old' dropdown, behind the screen, has options with False & Truth. Capital 'Truth' or 'truth' make no difference here.

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

Anybody know how I can acplish this? I find the Select2 documentation a bit lackluster. I'm currently using Select2 4.0.5, but might be able to downgrade.

Currently trying to use Select2 in an old app. I can successfully activate the old dropdown and turn it into a Select2 dropdown. All works fine. The dropdown is filled up and related functions are still working. However, I'm trying to do something a bit more advanced.

In the old dropdown, every option has a custom attribute.

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

Now, if the onlyslave property is true, I want the text color to be red. If it's false, it should remain black. I already know how to set the text to red, using this:

.select2-results { 
  color: red;
}

That obviously turns every result in the Select2 dropdown red. I thought adding an attribute [onlyslave="true"] would solve it, but it does not. The following snippet doesn't turn anything red, despite the fact that the 'old' dropdown, behind the screen, has options with False & Truth. Capital 'Truth' or 'truth' make no difference here.

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

Anybody know how I can acplish this? I find the Select2 documentation a bit lackluster. I'm currently using Select2 4.0.5, but might be able to downgrade.

• javascript
• jquery
• css
• jquery-select2

• 1 It looks like you possibly need to use the templateResult templating functionality to build your options: select2/dropdown#templating – delinear Commented Nov 29, 2017 at 12:20

2 Answers 2

As I mentioned in my ment, you need to use the templateResult property to build your element, taking the onlyslave attribute into account, e.g.

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 example: https://codepen.io/anon/pen/gXByeK

Here is a working fiddle which shows how to acplish what you've asked. As a previous answer mentioned, you need to use the templateResult feature of select2. Select2 works by hiding your original selectand building and displaying a custom version. This custom version does not have the onlyslave attribute from your original select which is why your css selector can't target it.

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