Adding additional data to select options using jQuery

Adding HTML5 data attributes

To store nuggets of additional information to your <option> elements, HTML5 data attributes become your accomplice. They maintain the validity of your HTML and follow all the standard protocols and etiquettes—the perfect crime partners! Here's how to use them:

• Setting a data attribute:

  // Veg option gets 'tasty', non-veg option gets 'tasty too'—equality!
  $('option[value="val1"]').data('taste', 'tasty');
  

• Getting a data attribute of the selected option:

  // TL;DR of the selected option's manifesto.
  $('#mySelect').find('option:selected').data('taste');
  

Integrating into existing HTML

Got pre-existing HTML and want to pour some secret sauce on it? Here's how to add extra info without re-rendering the complete select box:

// Spying level: 007
$('#mySelect option[value="1"]').data('additional', 'Option one's secret!');
$('#mySelect option[value="2"]').data('additional', 'Option two's secret!');
$('#mySelect option[value="3"]').data('additional', 'Option three's secret!');


User events and secret retrieval

User-triggered events should whisper your options' secrets in a jiffy. Use the .change() event handler like a seance to communicate with the spirits:

// User makes a choice. We get to judge, silently!
$('#mySelect').change(function() {
  var selectedSecret = $(this).find('option:selected').data('additional');
  console.log("User selected an option and here's its secret: " + selectedSecret);
});


Advanced operations: beyond the basics

Ready to dive deeper? Let's modify, remove, or dynamically set data attributes based on different conditions or other input fields. Don't worry, no one gets hurt!

• Modify: Do a little nip-n-tuck of existing attributes with .data(key, newValue).
• Remove: Pluck out the unnecessary attributes using the .removeData(key) tweezer.
• Dynamically set: Hotwire data attributes based on other fields in disgruntled teenager style.

Ensuring fallbacks and compatibility

HTML5 and jQuery are supercool pals, but not all browsers get their bro-code. For such browsers, use the attr() method as an alternative:

$('select option').attr('data-myinfo', 'value'); // Smoothly stash the secret.
var info = $('select option:selected').attr('data-myinfo'); // Smoothly retrieve the secret.


This acts as your browser compatibility insurance—ensuring functionality doesn't surrender when viewed through different glasses.

Optimizing for performance

Too much of a good thing can be bad, and data attributes are no different. Overusing them can cause performance hiccups, hence, assign them judiciously—just like sprinkling salt in food.