Javascript 开启 html 选择选项

Question

我一直在尝试创建可以执行操作的脚本，例如在“p”标签中写一些东西。我在 html 中有 2 个选择列表。我想让一切都与一切交互，所以第一个列表中的每个元素与第二个列表中的每个元素都有不同的交互。我认为使用 switch 将是最有效的方法，但无法使其工作

<select name="metric" id="metric">
                    <option value="kilometers">km</option>
                    <option value="meters">m</option>
                    <option value="centimeters">cm</option>
                    <option value="milimeters">mm</option>
                </select>
                
                <select name="imperial" id="imperial">
                    <option value="miles">mi</option>
                    <option value="yards">yd</option>
                    <option value="feet">ft</option>
                    <option value="inches">in</option>
                </select>
                
                <button onclick="press()">Click</button>
                <p id="aaa1">Placeholder</p>

var x = document.getElementById("imperial");
var i = x.selectedIndex;


function press() {
    
    if (document.getElementById("metric").getElementsByTagName("option")[0].selected) {
        
        switch (i); {
            case 0:
                document.getElementById("aaa1").innerHTML = "0";
                break;
            case 1:
                document.getElementById("aaa1").innerHTML = "1";
                break;
            case 2:
                document.getElementById("aaa1").innerHTML = "2";
                break;
            case 3:
                document.getElementById("aaa1").innerHTML = "3";
                break;
            default:
                document.getElementById("aaa1").innerHTML = "default";
        }
        
    }
}

在那之后我会有另一个 if with ("option")[1] etc. 有人可以帮忙吗？

Answer 1

如果您尝试进行每种组合，您最终会得到很多 if 和/或switch 语句。而是将组合存储在一个对象中，其中键作为 2 个输入的组合，值作为您想要输出的任何内容。像这样的：

const config = {
 "kilometers": {
    "miles": "Convert km to mi",
    "yards": "Convert km to yd",
    "feet": "Convert km to ft",
    "inches": "Convert km to in"
  },
  "meters": {
    "miles": "Convert m to mi",
    "yards": "Convert m to yd",
    "feet": "Convert m to ft",
    "inches": "Convert m to in"
  },
  "centimeters": {
    "miles": "Convert cm to mi",
    "yards": "Convert cm to yd",
    "feet": "Convert cm to ft",
    "inches": "Convert cm to in"
  },
  "milimeters": {
    "miles": "Convert mm to mi",
    "yards": "Convert mm to yd",
    "feet": "Convert mm to ft",
    "inches": "Convert mm to in"
  }
}

document.getElementById("btn").addEventListener("click", function(){
   const metricValue = document.getElementById("metric").value;
   const impValue = document.getElementById("imperial").value;
   
   document.getElementById("aaa1").innerHTML = config[metricValue][impValue];
});

<select name="metric" id="metric">
  <option value="kilometers">km</option>
  <option value="meters">m</option>
  <option value="centimeters">cm</option>
  <option value="milimeters">mm</option>
</select>

<select name="imperial" id="imperial">
  <option value="miles">mi</option>
  <option value="yards">yd</option>
  <option value="feet">ft</option>
  <option value="inches">in</option>
</select>

<button id="btn">Click</button>
<p id="aaa1">Placeholder</p>

这种方法的有趣之处在于，可以在 config 对象中存储的内容没有限制，您可以在其中存储一个方法引用来进行转换，解释一下：

const config = {
 "kilometers": {
    "miles": km => km / 1.609,
    "yards": km => km / 1094,
    "feet": km => km / 3281,
    "inches": km => km / 39370
  },
  .....
}

现在，如果您有 KM 值，您可以获取该配置并直接转换为其他测量值之一

const metricValue = document.getElementById("metric").value; // eg. kilometers
const impValue = document.getElementById("imperial").value; //eg. miles

// have a numeric input somewhere to input the "from"
const fromValue = document.getElementById("valueInput").value

// get the converter function
const fn = config[metricValue][impValue];

// calculate the to result
const toResult = fn(fromValue);