Automatically change html dropdown selection based on values entered in inputs

I have a form where the user enters the parcel dimensions into 3 input fields (length,width,height) and then selects the parcel name from the dropdown selection.

The function I am trying to implement is when the user enters his values into the inputs the function automatically selects the parcel name from the dropdown based on his values when the user clicks the calculate button.

I would like the script to work out the result based on the option datasets not by manually setting the results/values in the javascript as I have more datasets which get changed regularly.

The code I have added always only selects the last option, I tried using a for loop but I could not get that to change the end result.

function calculate(clicked_id) {

  Array.from(document.querySelector("#dropdown").options).forEach(function(option_element) {

      var option_text = option_element.text;
      var option_value = option_element.value;
      var option_dataset_length = option_element.dataset.length;
      var option_dataset_width = option_element.dataset.width;
      var option_dataset_height = option_element.dataset.height;
      var is_option_selected = option_element.selected;

      var length = document.getElementById("length").value;
      var width = document.getElementById("width").value;
      var height = document.getElementById("height").value;

        if (length <= option_dataset_length && width <= option_dataset_width && height <= option_dataset_height) {
          document.getElementById("dropdown").value = option_value;
        } 
    }
  )
}

<!-- inputs -->
<div class="row">
<input type="text" id="length" placeholder="length">
<input type="text" id="width" placeholder="width">
<input type="text" id="height" placeholder="height">
</div>

<br>

<!-- dropdown -->
<div class="row">
<select id="dropdown">
    <option value="1" data-length="10" data-width="15" data-height="20">Small Parcel</option>
    <option value="2" data-length="20" data-width="25" data-height="30">Medium Parcel</option>
    <option value="3" data-length="30" data-width="35" data-height="40">Large Parcel</option> 
</select>
</div>

<br>

<!-- button -->
<div class="row">
<button type="button" onClick="calculate(this.id)">Calculate</button>
</div>