Having difficulty modifying the font color on a Select2 dropdown that includes custom attributes

Question

Having difficulty modifying the font color on a Select2 dropdown that includes custom attributes

Recently, I have been exploring the integration of Select2 in an older application. I have successfully converted the old dropdown into a Select2 dropdown and everything seems to be functioning properly. The dropdown is populated with options and all related functions are working as expected. However, I am now looking to implement a more advanced feature.

In the original dropdown, each option is equipped with a custom attribute:

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

I am aiming to change the text color to red if the 'onlyslave' property is set to true. If it's false, the text should remain black. I have managed to make the text red by utilizing the following CSS code:

.select2-results { 
  color: red;
}

However, applying an attribute selector [onlyslave="true"] does not yield the desired outcome. Despite having 'False' and 'True' values within the options of the 'old' dropdown, the text does not turn red. Additionally, variations in capitalization such as 'Truth' or 'truth' do not affect the result.

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

If anyone has suggestions on how to achieve this functionality, please share your insights. I have found the Select2 documentation to be somewhat lacking in this area. My current version of Select2 is 4.0.5, but I am open to downgrading if necessary.

javascript jquery css jquery-select2

Answer 1

Answer №1

To create your element, remember to utilize the templateResult property as mentioned in my previous comment, and make sure to consider the onlyslave attribute. Here's an example:

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

Check out this Codepen example for a live demonstration: https://codepen.io/anon/pen/gXByeK

Answer 2

To create your element, remember to utilize the templateResult property as mentioned in my previous comment, and make sure to consider the onlyslave attribute. Here's an example:

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

Check out this Codepen example for a live demonstration: https://codepen.io/anon/pen/gXByeK

Answer 3

Answer №2

Check out this functional code snippet that demonstrates how to achieve the task you inquired about. One of the previous responses mentioned utilizing the templateResult functionality of select2 for proper implementation. Select2 operates by concealing your original select element and creating a customized version for display. This customized version lacks the onlyslave attribute present in your original select element, causing your CSS selector to be ineffective.

Here is an example of the HTML:

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

And here is the corresponding 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
});

Answer 4

Check out this functional code snippet that demonstrates how to achieve the task you inquired about. One of the previous responses mentioned utilizing the templateResult functionality of select2 for proper implementation. Select2 operates by concealing your original select element and creating a customized version for display. This customized version lacks the onlyslave attribute present in your original select element, causing your CSS selector to be ineffective.

Here is an example of the HTML:

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

And here is the corresponding 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
});

Having difficulty modifying the font color on a Select2 dropdown that includes custom attributes

Answer №1

Answer №2

Similar questions

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Exploring Angular $resource with a playful twist

The TypeScript script does not qualify as a module

Using ng-non-bindable along with ng-if in Angular Google Maps allows for certain elements or

jquery global variable not working as expected

Quiz timer using JavaScript

A peculiar issue is occurring in Vue.js where a value within a v-for loop seems to be losing association with the intended array

Leveraging personalized styles in Kendo UI

Enhance the impact of "dialogs" to the fullest extent or minimize it to achieve the

Solution for problem with IE scrollWidth

What is the best approach for dynamically updating JSON values using user input in jQuery?

Ways to align a div vertically in relation to the remaining space's height

Implement an AJAX link on the webpage using Yii framework

Using jQuery and Django to send a list of numbers in order

Seeking assistance with exporting a Vue single file component that relies on Swiper.js for functionality

Tips for choosing the dropdown selection on an ASPX website page

Switching the background image with a single click and reverting it back with a double click using jquery

Examining components that are lazily initialized using Jest

A javascript text slider that dynamically updates text content sourced from PHP

Ways to prevent the navbar from disappearing when the Chrome browser is resized