Javascript 打开 html select 选项

Javascript switch on html select option

我一直在尝试创建脚本来执行操作,例如在“p”标签中写一些东西。我在 html 中有 2 select 个列表。我想让所有东西都交互,所以第一个列表中的每个元素与第二个列表中的每个元素都有不同的交互。我认为使用 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] 等等。 有人可以帮忙吗?

如果您尝试进行所有组合,您最终会得到 lot of if and/or 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);