javascript - Dynamically Select An HTML option based previous select option

Question

How do you dynamically select an HTML option based on a previous select tag? Image of current project

Below is the code I have done to get there. I expect the size select tag to be disabled until a user selects a colour like Neon Blue and then the size option tag populates all the sizes that are available for that specific color like this like this

    <!-- product attributes -->
              <div class="product-attributes">

              <select class="product-select-attributes" name="p-attrib" id="p-attrib">
                        <?php
                          echo "<option selected disabled>Color</option>";
                          //echo "<option value={$productID}>$color</option>";
                          foreach($arrays as $nxt) {                                    
                            //echo "<option value={$nxt['pID']}>{$nxt['attrib']} <p> | </p> {$nxt['quantity']} <p>left</p></option>";
                            echo "<option value={$productID}>{$nxt['color']}</option>";
                          }

                        ?>
                  </select>

                <br>
                <hr>


              <select class="product-select-attributes" name="p-attrib" id="p-attrib">
                      <?php
                        echo "<option selected disabled>Size</option>";
                        foreach($arrays as $nxt) {  
                          //echo "<option value={$nxt['pID']}>{$nxt['attrib']}  <p> | </p> {$nxt['stock']} <p>left</p> </option>";
                          echo "<option value={$productID}>{$nxt['size']}</option>";
                        }
                      ?>
                </select>
              
              </div>

              <!-- add to cart button -->
              <div class="product-add-to-cart">
                      <div class="product-atc">
                          <a href="#">Add To Cart</a>
                      </div>
              </div>

标签： javascriptphphtmlcss