如何在javascript中获取下拉列表的值

Question

如何获取下拉列表的值并在 switch 语句中使用它？

 var x = document.myform.sel2.value; var result; if(document.myform.sel1[0].selected){ switch(x){ case document.myform.sel2[1].selected : result = (066 + (6.23 * weight ) + (12.7 * height) - (6.8 * age))* 1.2; break; case document.myform.sel2[2].selected : result = (066 + (6.23 * weight ) + (12.7 * height) - (6.8 * age))* 1.375; break; case document.myform.sel2[3].selected : result = (066 + (6.23 * weight ) + (12.7 * height) - (6.8 * age))* 1.55; break; case document.myform.sel2[4].selected : result = (066 + (6.23 * weight ) + (12.7 * height) - (6.8 * age))* 1.725; break; case document.myform.sel2[5].selected : result = (066 + (6.23 * weight ) + (12.7 * height) - (6.8 * age))* 1.9; break; } } else if (document.myform.sel1[1].selected){ result = (655 + (4.35 * weight) + (4.7 * height)-(4.7 * age))* 1.2; } alert("Your BMR is " + result);

 <select style="width:200px" id="sel2" name="sel2" required> <option value="" disabled selected hidden>--Select from the dropdwon--</option> <option value="Sedantray" id="1">Sedantray</option> <option value="Lightly active" id="2">Lightly active</option> <option value="Moderately active" id="3">Moderately active</option> <option value="Very active" id="4">Very active</option> <option value="Extremly active" id="5">Extremly active</option> </select>

它给了我一个未定义的按摩，所以我想它是因为获取下拉列表的值时出错。 我尝试了 getElementById 方法，但效果不佳。

Answer 1

这是一个工作示例。 他们的关键是获取 HTML 元素并使用.value属性为您提供所选值。

 function changed() { var val = document.getElementById('sel2').value; console.log(val) }

 <select style="width:200px" id="sel2" name="sel2" onChange="changed()" required> <option value=" " disabled selected hidden>--Select from the dropdwon--</option> <option value="Sedantray " id="1 ">Sedantray</option> <option value="Lightly active " id="2 ">Lightly active</option> <option value="Moderately active " id="3 ">Moderately active</option> <option value="Very active " id="4 ">Very active</option> <option value="Extremly active " id="5 ">Extremly active</option> </select>

希望这可以帮助 ：）

Answer 2

你似乎有点糊涂了，你采用的编码风格有点过时了。

此外，在尝试运行计算之前等待用户选择某些内容是有意义的，因此我将代码放置在选择的“更改”事件处理程序中。

首先，我使用document.getElementById来获取对 select 元素的引用。 然后我使用addEventListener将一个事件处理程序附加到它，并提供了一个匿名回调函数。 每当用户更改选择时，都会执行此功能。 在其中， this关键字将始终代表 select 元素，因此this.value将获得当时当前选定的值。

然后，您可以设置一个数据对象，其中包含每个可能的选项以及用于更改 BMR 公式的值。 然后，您可以在执行公式时将该值注入到公式中，方法是从与下拉列表中所选值匹配的对象中选择条目。 你不需要switch语句

PS我还更正了“久坐不动”的拼写。

这是一个工作演示：

 //dummy values for demo var height = 1; var weight = 1; var age = 1; var dropdown = document.getElementById("sel2"); dropdown.addEventListener("change", function(e) { var exerciseModifiers = { "Sedentary": 1.2, "Lightly active": 1.375, "Moderately active": 1.55, "Very active": 1.725, "Extremely active": 1.8 } var result = (066 + (6.23 * weight) + (12.7 * height) - (6.8 * age)) * exerciseModifiers[this.value]; alert("Your BMR is " + result); });

 <select style="width:200px" id="sel2" name="sel2" required> <option value="" disabled selected>--Select from the dropdwon--</option> <option value="Sedentary" id="1">Sedentary</option> <option value="Lightly active" id="2">Lightly active</option> <option value="Moderately active" id="3">Moderately active</option> <option value="Very active" id="4">Very active</option> <option value="Extremly active" id="5">Extremly active</option> </select>