I want to create shop menu with options that dynamically show the different options available per size of a product. So for example when selecting shirt size small I want to show that it is available in blue and yellow but shirt size medium is only available in blue.

I'm not sure how to organize my fieldset, I'm thinking a grid like this:

  shirt_options:
    mode: table
    fields:
      size:
        options:
          small: small
          medium: medium
          large: large
        inline: true
        type: radio
        display: size
      color:
        options:
          blue: blue
          yellow: yellow
        type: checkboxes
        display: colour
    type: grid
    display: 'shirt options'


On the front end I want to create a dropdown menu for size options and the one below that would update the available colors per selected size.

<select>
  {{ shirt_options }}
    <option>{{ size }}</option>
  {{ /shirt_options }}
</select>


Then below another select pulling only the data per the chosen size option.

<select>
  {{ shirt_options }}
     {{ color }}<option>{{ value }}</option>{{ /color }}
  {{ /shirt_options }}
</select>


I think this might require ajax or javascript to dynamically change the menu, I'm sort of a noob with that but atleast though if anyone has ideas on how I should organize my fieldset and pull the correct data I would appreciate, even without the dynamic part.