JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<select name="select1" id="select1">
    <option value="" disabled>Select your option</option>
    <option value="1" option-id selected="1">Group A</option>
    <option value="2" option-id="2">Group B</option>
    <option value="3" option-id="3">Group C</option>
</select>

<select name="select2" id="select2">
    <option value="" disabled selected>Select your option</option>
    <option value="a" option-id="1" data-sizes="0">Product 1 No Sizes</option>
    <option value="b" option-id="1" data-sizes="2,3,9">Product 2 Standard and large</option>
    <option value="c" option-id="1" data-sizes="1,2,9">Product 3 Small and Standard</option>
    <option value="d" option-id="1" data-sizes="2,3,9">Product 4 Standard and Large</option>
    <option value="e" option-id="1" data-sizes="0">Product 5 No Sizes</option>
    <option value="f" option-id="1" data-sizes="0">Product 6 No Sizes</option>
    <option value="g" option-id="2" data-sizes="0">Product 7 No Sizes</option>
    <option value="h" option-id="2" data-sizes="0">Product 8 No Sizes</option>
    <option value="i" option-id="2" data-sizes="0">Product 9 No Sizes<option>
    <option value="j" option-id="3" data-sizes="0">Product 10 No Sizes<option>
</select>

<select name="select3" id="select3">
    <option value="" disabled data-size="9" selected>Select your option</option>
    <option value="aa" data-size="1">Small</option>
    <option value="bb" data-size="2">Standard</option>
    <option value="cc" data-size="3">Large</option>
</select>

JavaScript

var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ), // I added that line but not sure if its correct
    $options_a = $select2.find( 'option' );

  $select1.on( 'change', function() {
    $select2.html( $options_a.filter( '[option-id="' + this.value + '"]' ));
  }).trigger( 'change' );

// For $select3
  $select2.on( 'change', function() {
    $select3.children().get().forEach(function(opt){
      opt.style.display= "none";
      if($select2[0][$select2[0].selectedIndex].dataset["sizes"].includes(opt.dataset["size"])){ 
        opt.style.display="";
      }
    });
  } ).trigger( 'change' );