JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<select name="select1" id="select1">
    <option value="" disabled selected>Select your option</option>
    <option value="1" option-id="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="ay" option-id="1" idx="0">Product 1 No Sizes</option>
    <option value="by" option-id="1" idx="1">Product 2 Standard and large</option>
    <option value="cy" option-id="1" idx="2">Product 3 Small and Standard</option>
    <option value="dy" option-id="1" idx="1">Product 4 Standard and Large</option>
    <option value="ey" option-id="1" idx="0">Product 5 No Sizes</option>
    <option value="fy" option-id="1" idx="0">Product 6 No Sizes</option>
    <option value="gy" option-id="2" idx="0">Product 7 No Sizes</option>
    <option value="hy" option-id="2" idx="0">Product 8 No Sizes</option>
    <option value="iy" option-id="2" idx="0">Product 9 No Sizes<option>
    <option value="iy" option-id="3" idx="0">Product 10 No Sizes<option>
</select>

<select name="select3" id="select3">
    <option value="" disabled selected>Select your option</option>
    <option value="aa" idx="2">Small</option>
    <option value="bb" idx="2">Standard</option>
      
    <option value="bb" idx="1">Standard</option>
    <option value="cc" idx="1">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' ),
    $options_b = $select3.find( 'option' ); // I added that line but not sure if its correct

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

// I added the next lines for select3 but not sure if they are correct
$select2.on( 'change', function() {
  $select3.html( $options_b.filter( '[idx="' + this.value + '"]' ) );
} ).trigger( 'change' );