here是我制作的一个 jsfiddle，用于向您展示我需要帮助的内容。
需要更新选择框值的帮助
我已经尝试使用 3 个 for 循环结构来更新我的下拉框，但我糟糕的 Javascript 技能不允许我实现这一点。
var units = [
['Volts', 1],
['Millivolts', .001],
['Microvolts', 0.000001]
];
var selectors = document.querySelectorAll('.Voltage');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
var units = [
['Amps', 1],
['Milliamperes', .001],
['Microamperes', 0.000001]
];
var selectors = document.querySelectorAll('.Current');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
var units = [
['Ohms', 1],
['Milliohms', .001],
['Microohms', 0.000001]
];
var selectors = document.querySelectorAll('.Resistance');
for (var i = 0; i < units.length; i++) {
for (var j = 0; j < selectors.length; j++) {
var option = document.createElement('option');
option.value = units[i][1];
option.textContent = units[i][0];
selectors[j].add(option);
}
}
function EqualsVoltage() {
var Voltage = document.getElementById("inputVoltage").value;
var Current = document.getElementById("inputCurrent").value;
var Resistance = document.getElementById("inputResistance").value;
if (Resistance != "0" && Current != "0") {
document.getElementById("inputVoltage").value = parseFloat(Current * Resistance).toExponential();
}
}
function EqualsCurrent() {
var Voltage = document.getElementById("inputVoltage").value;
var Current = document.getElementById("inputCurrent").value;
var Resistance = document.getElementById("inputResistance").value;
if (Voltage != "0" && Resistance != "0") {
document.getElementById("inputCurrent").value = parseFloat(Voltage / Resistance).toExponential();
}
}
function EqualsResistance() {
var Voltage = document.getElementById("inputVoltage").value;
var Current = document.getElementById("inputCurrent").value;
var Resistance = document.getElementById("inputResistance").value;
if (Voltage != "0" && Current != "0") {
document.getElementById("inputResistance").value = parseFloat(Voltage / Current).toExponential();
}
}<!DOCTYPE html>
<html>
<body>
<br>
<select style="float:left" id="EANDM1" class="js-example-basic-single select2-container Voltage" oninput="EqualsResistance(); EqualsCurrent()" onchange="EqualsResistance(); EqualsCurrent()">
</select>
<label>Voltage:</label>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputVoltage" type="number" oninput="EqualsResistance(); EqualsCurrent()" value="0"> </p>
<select style="float:left" id="EANDM2" class="js-example-basic-single select2-container Current" oninput="EqualsVoltage(); EqualsResistance()" onchange="EqualsVoltage(); EqualsResistance()">
</select>
<p>
<label>Current:</label>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputCurrent" type="number" oninput="EqualsVoltage(); EqualsResistance()" value="0"> </p>
<select style="float:left" id="EANDM3" class="js-example-basic-single select2-container Resistance" oninput="EqualsCurrent();EqualsVoltage()" onchange="EqualsCurrent();EqualsVoltage()">
</select>
<p>
<label>Resistance:</label>
<input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="inputResistance" type="number" oninput="EqualsCurrent();EqualsVoltage()" value="0"> </p>
</body>
</html>当我在下拉框中切换到毫伏时，在我在各自的下拉框中填写了 2 个值后，电流和电阻的值应该会发生变化。请帮助我获取下拉框以更改输入字段的值。谢谢。
最佳答案
有几个问题。
parseFloat(Current * Resistance)
这不起作用，因为 Current 和 Resistance 是字符串，但您在解析它们之前将它们相乘。相反，在乘以它们之前解析它们:
parseFloat(Current) * parseFloat(Resistance)
另一个与从下拉框中选择内容时重新计算相关的问题是您没有提取或使用这些因素。所以单位永远不会改变。
这是我对计算代码所做的快速整理，它考虑了选定的单位并在进行计算之前转换了值。 (我还删除了 toExponential 调用以更轻松地查看发生了什么。)
提取了从控件获取值的代码到它自己的函数中。这仍然可以进一步改进。
function GetValues() {
const voltageText = document.getElementById("inputVoltage").value;
const currentText = document.getElementById("inputCurrent").value;
const resistanceText = document.getElementById("inputResistance").value;
const voltageFactorText = document.getElementById("EANDM1").value;
const currentFactorText = document.getElementById("EANDM2").value;
const resistanceFactorText = document.getElementById("EANDM3").value;
const voltageValue = parseFloat(voltageText);
const currentValue = parseFloat(currentText);
const resistanceValue = parseFloat(resistanceText);
const voltageFactor = parseFloat(voltageFactorText);
const currentFactor = parseFloat(currentFactorText);
const resistanceFactor = parseFloat(resistanceFactorText);
const voltage = voltageValue / voltageFactor;
const current = currentValue / currentFactor;
const resistance = resistanceValue / resistanceFactor;
return [voltage, current, resistance];
}
然后是三个重新计算函数:
function EqualsVoltage() {
const [voltage, current, resistance] = GetValues();
if (!resistance || !current)
return;
document.getElementById("inputVoltage").value = current * resistance;
}
function EqualsCurrent() {
const [voltage, current, resistance] = GetValues();
if (!voltage || !resistance)
return;
document.getElementById("inputCurrent").value = voltage / resistance;
}
function EqualsResistance() {
const [voltage, current, resistance] = GetValues();
if (!voltage || !current)
return;
document.getElementById("inputResistance").value = voltage / current;
}
关于javascript - 错误的 Javascript 编码和下拉框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55978879/