Product page in Drupal: Need to adjust css on the select tab if there is only one option ("size") available

Question

On a product page in Drupal Commerce, some items have size options while others do not. I need to adjust the css for those select tags that have only one size option. This is my jquery attempt to no avail:

if($(".page-store select.form-select option:selected").index()==0) {
  $(page-store select.form-select).addClass("one-option-only");
};

How can I achieve this?

Answer 1

Check .children("option").length.

$(document).ready(function() {
  $(".page-store select.form-select").each(function() {
    if ($(this).children("option").length === 1) {
      $(this).addClass("one-option-only");
    }
  });
});