如何在Select2的change事件中修改字体颜色以提示设置变更？

Got it, let's tweak your existing Select2 code so it uses font color to notify users when they've changed the default selection, instead of background color. Here's the modified version with clear explanations:

Modified Code #

$(document).on('change', ".ctaskSelector", function(e) {
  var val = $(this).val();
  var index = $(".ctaskSelector").index(this);
  // Cache the target element to avoid repeated DOM searches
  var select2Selection = $(this).next().find('.select2-selection');
  
  if (val != taskData[index].task_ID) {
    // Set font color to red when selection differs from default
    select2Selection.css({'color':'red'});
  } else {
    // Reset to your theme's default text color (use 'inherit' for flexibility)
    select2Selection.css({'color':'inherit'});
  }
});

Key Changes Explained #

• Swapped CSS Property: Replaced background-color with color to shift the visual cue from a colored background to colored text.
• Cached the Target Element: Stored the Select2 selection element in a variable to make the code cleaner and avoid redundant DOM queries (a small but useful performance tweak).
• Used inherit for Default Color: Instead of hardcoding white, inherit will match your site's default text styling when the selection is back to the original value. If you specifically want white, you can swap it back easily.

Optional: Target Only the Selected Text #

If you want to ensure only the selected text changes color (and not other parts of the Select2 box like dropdown icons), target the inner text container instead:

// Replace the select2Selection line with this
var select2Text = $(this).next().find('.select2-selection__rendered');
// Then use select2Text in the css() calls

That’s all—now users will see red text when they’ve deviated from the default task selection, and the text will revert to your theme’s default color when they pick the original value.

内容的提问来源于stack exchange，提问作者user6743474