具有 3 个相互关联的下拉类别的下拉 Onchange() 值

Question

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

例如：-

如果我从长度下拉类别中选择长度单位 feet，则第二个和第三个下拉类别宽度和面积将自动更改为 feet面积 的宽度和 平方英尺。此外，当我将宽度为米的第二个下拉类别更改为时， 长度单位类别下拉列表 和 面积单位类别下拉列表 长度 将自动更改为 米，面积 将自动更改为 平方米。

然后，它会在下面的输入框中显示每个类别的单位计量系统。如果值为 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

使用 js document.querySelector 选择元素，然后附加 Event Listener（在这种情况下我们使用 will change 事件）...所以当 select 字段（需要更改）我们可以做一些功能！

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

具有 3 个相互关联的下拉类别的下拉 Onchange() 值

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

html

javascript

jquery

onchange