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

Answer 2

Your logic is a little off and you have a syntax error.

//iterate each select
$('.page-store select.form-select').each(function() {
    //see if the current select has exactly one option
    if ($(this).find('option').length == 1) {
        //add the class
        $(this).addClass('one-option-only');
    }
});