只想问一下如何从下拉列表和文本框中提取值，然后将它们总计在一起并显示总计？我四处搜寻，尝试了不同的方法，但是没有成功。 仍在学习HTML和JavaScript。
What is your height? (centimetres)
<select>
<option name="height1" value="100">100cm</option>
<option name="height1" value="101">101cm</option>
<option name="height1" value="102">102cm</option>
<option name="height1" value="103">103cm</option>
<option name="height1" value="104">104cm</option>
<option name="height1" value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">
function calculate_bmi()
{
/*var h = parseFloat(document.getElementById("height1").value);
var w = parseFloat(document.getElementById("weight1").value);
if ((h != parseFloat(h, 10)) || (w != parseFloat(w, 10)))
alert("Must insert number")
if ( ( h <= 0 ) || ( w <= 0 ) )
alert("Please insert positive numbers")
if ( ( h >= 2.7 ) || ( w >= 500 ) )
alert("Out of range");
else
{
var result = w / h / h;
result = Math.round(result * 100) / 100;
document.getElementById("txtresult").value = result;
}*/
var h = document.getElementsByName("height1");
//h = h / 100;
var w = parseFloat(document.getElementById("weight1").value);
var result = 0;
for (var i = 0; i < h.length; i++)
{
if(h[i].tagName == 'SELECT')
{
//result = w / Number(h[i].options[h[i].selectedIndex].value);
result = h + w;
}
if (h[i].checked)
{
//result = parseFloat(h[i].value);
result = h + w;
}
}
document.getElementById("txtresult").value = result.toFixed(2);
}
我遵循一些Internet上可用的解决方案，但是它无法工作。文本框值有效（注释代码），但是我想使用下拉列表和文本框进行汇总，但失败了。 注意：只是想总结一下。因为我想知道如何在下拉列表和文本框内获取和添加值。然后，我将做剩下的事情（计算BMI）。
谢谢。
答案 0 :(得分：2)
您可以使用document.getElementsByName("height1")[0]获取所需的元素，然后使用h.options[h.selectedIndex].value查找选定的值。然后，您可以照常使用parseFloat：
function calculate_bmi() {
var h = document.getElementsByName("height1")[0];
h = parseFloat(h.options[h.selectedIndex].value);
// h = h / 100;
var w = parseFloat(document.getElementById("weight1").value);
console.log(h, w);
var result = h + w;
document.getElementById("txtresult").value = result.toFixed(2);
}What is your height? (centimetres)
<select name="height1">
<option value="100">100cm</option>
<option value="101">101cm</option>
<option value="102">102cm</option>
<option value="103">103cm</option>
<option value="104">104cm</option>
<option value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">
请注意，应将name添加到控件（即<select>元素）中，而不要添加其中的值（即<option>元素）。
答案 1 :(得分：2)
要从下拉/选择元素中获取值，可以使用：
document.querySelector('select').value;
这将为您提供一个字符串（单词），但是，由于您要使用此输入进行计算，因此需要将其作为一个数字（整数，浮点等），以便我们可以使用+在此语句前面将其转换为数字：
+document.querySelector('select').value;
但是，我建议您在id元素中添加一个select，以便您可以像这样定位（添加ID可以改善代码的运行时间）：
+document.getElementById('height').value;
要从文本框中获取值，可以执行以下操作：
+document.getElementById('weight1').value;
在这里，我们还将使用+运算符将其转换为数字。
最后，要将bmi的文本框设置为计算值，可以使用：
document.getElementById("txtresult").value = bmi;
请参见下面的工作示例：
function calculate_bmi() {
let height = +document.getElementById("height").value;
let weight = +document.getElementById("weight1").value;
let bmi = height + weight; // perform bmi calculation here
document.getElementById("txtresult").value = bmi;
}What is your height? (centimetres)
<select id="height">
<option name="height1" value="100">100cm</option>
<option name="height1" value="101">101cm</option>
<option name="height1" value="102">102cm</option>
<option name="height1" value="103">103cm</option>
<option name="height1" value="104">104cm</option>
<option name="height1" value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">
答案 2 :(得分：0)
此代码对我有用。我对您的html做了一些修改，并在选择框中添加了一个ID。
function calculate_bmi() {
/*var h = parseFloat(document.getElementById("height1").value);
var w = parseFloat(document.getElementById("weight1").value);
if ((h != parseFloat(h, 10)) || (w != parseFloat(w, 10)))
alert("Must insert number")
if ( ( h <= 0 ) || ( w <= 0 ) )
alert("Please insert positive numbers")
if ( ( h >= 2.7 ) || ( w >= 500 ) )
alert("Out of range");
else
{
var result = w / h / h;
result = Math.round(result * 100) / 100;
document.getElementById("txtresult").value = result;
}*/
var selectBox = document.getElementById("selectBox");
var h = parseFloat(selectBox.value);
//h = h / 100;
var w = parseFloat(document.getElementById("weight1").value);
var result = h+w;
document.getElementById("txtresult").value = result.toFixed(2);
} <html>
<body>
What is your height? (centimetres)
<select id="selectBox">
<option name="height1" value="100">100cm</option>
<option name="height1" value="101">101cm</option>
<option name="height1" value="102">102cm</option>
<option name="height1" value="103">103cm</option>
<option name="height1" value="104">104cm</option>
<option name="height1" value="105">105cm</option>
</select>
<br /><br />
What is your weight? (kg)
<input
type="number"
id="weight1"
step="0.01"
name="weight"
pattern="\d{4}"
autocomplete="off"
/><br /><br />
BMI: <input type="text" id="txtresult" name="bmi" readonly />
<input
type="button"
name="calculate"
value="Calculate"
onclick="calculate_bmi()"
/>
</body>
<script>
</script>
</html>
答案 3 :(得分：0)
如果您尝试从下拉列表中获取值。 通过名称获取Select元素并将其存储为数组，然后在列表中运行for循环并提取值。见下文
function calculate_bmi() {
var value = 0;
var h = document.getElementsByName("height1");
for(var i = 0; i<h.length; i++){
if(h[i].selected){
value = h[i].value
// Do something with the value
}
}
}