select option data attribute code example

Example 1: select onchange jquery get the selected option data attribute

$('#country').on('change', function(){
    let id = $(this).find(':selected').data('id');
    console.log(id);
  });

Example 2: css data attribute selector

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

Example 3: jquery get data attribute of selected option

$(this).find(':selected').data('id')

Example 4: select by data attribute

$('*[data-id="your_id"]');