Dropdown Onchange() value with 3 dropdown category related each others

Question

I have 3 dropdown category which are Length, width, Area.

For example :-

if I choose the length unit to feet from length dropdown category, the second and third dropdown category which is width and area will automatically change to feet for width and sqft for area. Furthermore, When I change the second dropdown category which is width to meter, the length unit category dropdownlist and area unit category dropdownlist will automatically change to meter for length and m2 for area.

Then, it will display unit measure system for each category in input box below. if value is feet, it becomes imperial. if value is meter, then it becomes metric.

How to achieve this scenario in JQuery/Javascript code? Thanks in advance.

<label>Length </label>
  <select id="length" name="length">
    <option value="" selected="selected" onchange="length()">--Unit--</option>
    <option value="feet">feet</option>
    <option value="meter">meter</option>
  </select>
  
 
 <label>Width </label>
  <select id="width" name="width">
    <option value="" selected="selected" onchange="width()">--Unit--</option>
        <option value="feet">feet</option>
        <option value="meter">meter</option>
  </select>
  
  
  <label>Area </label>
  <select id="area" name="area">
    <option value="" selected="selected" onchange="area()">--Unit--</option>
        <option value="feet">sqft.</option>
        <option value="meter">m2</option>
  </select>
  
  <div id="m">
    <input type="text" id="measure"/>
  </div>

Answer 1

Selecting the elements using js document.querySelector and then attaching Event Listener ( in this case we use will change event ).... So when there is change in the select field ( whose changes is desired ) we can do some function !

HTML

   <label for="length">Length </label>
   <select id="length" name="length">
        <option value="" selected="selected" >--Unit--</option>
        <option value="feet">feet</option>
        <option value="meter">meter</option>
      </select>
      
     
     <label for="width">Width </label>
      <select id="width" name="width">
        <option value="" selected="selected">--Unit--</option>
            <option value="feet">feet</option>
            <option value="meter">meter</option>
      </select>
      
      
      <label for="area">Area </label>
      <select id="area" name="area">
        <option value="" selected="selecte">--Unit--</option>
            <option value="feet">sqft.</option>
            <option value="meter">m2</option>
      </select>
      
      <div id="m">
        <input type="text" id="measure"/>
      </div>

JS

    const length_field = document.querySelector('#length');
    
    const width_field = document.querySelector('#width');
    
    const area_field = document.querySelector('#area');
    
    length_field.addEventListener('change' , function (e){
      // using condition 
       if(this.value === "feet"){
          area_field.value = "feet";
          width_field.value = "feet";
       }else if(this.value === "meter"){
          area_field.value = "meter";
          width_field.value = "meter";
       }else{
         // do nothing by default 
       }
    })