下拉 Onchange() 值与 3 个下拉类别相互关联

Question

我有 3 个下拉类别，分别是 长度、宽度、面积。

例如：-

如果我从长度下拉类别中选择长度单位为英尺，第二个和第三个下拉类别即宽度和面积将自动更改为feet for width和面积平方英尺。此外，当我将第二个下拉类别宽度更改为 meter 时，length unit category dropdownlist 和 area unit category dropdownlist 将自动更改为长度为米，面积为平方米。

然后，它会在下面的输入框中显示每个类别的单位度量系统。 如果值为 feet，则它变为 imperial。如果值为 meter，则它变为 metric。

如何在 JQuery/Javascript 代码中实现这个场景？提前致谢。

<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做一些功能！

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 
       }
    })