将 HTML 下拉菜单值传递给 JavaScript 函数和 onclick 函数调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22845451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass HTML dropdown menu values to JavaScript function & onclick function call
提问by CraneWing
I know that this question has been asked in several ways, but they have not helped me, and I'm getting an "undefined" error when I try to debug this.
我知道已经通过多种方式提出了这个问题，但他们并没有帮助我，并且当我尝试调试它时出现“未定义”错误。
It's simple: I have an HTML dropdown menu with several different metric units on it, and I have given each a value. I want to pass the selected value to a JavaScript function that will check the metric unit type and then convert it to a corresponding English unit.
很简单：我有一个 HTML 下拉菜单，上面有几个不同的公制单位，我给每个单位都指定了一个值。我想将选定的值传递给一个 JavaScript 函数，该函数将检查公制单位类型，然后将其转换为相应的英制单位。
The dropdown HTML:
下拉 HTML：
e<p><span><label for="metric-unit">Select metric unit</label></span>
<select name="metric" id="metric">
<option value="cel">Celsius</option>
<option value="cm">Centimeters</option>
<option value="kg">Kilograms</option>
<option value="ml">Milliliters</option>
</select>
</p>
My JavaScript function attempt to pass the value:
我的 JavaScript 函数尝试传递值：
metricUnit = document.getElementById("metric").value;
My second question is on calling the conversion function. I want to do that once the metric unit is selected, and a number entered into a text field, and then the user clicks a submission button. Should I call the function with or without arguments, especially if I use getElementById to get the value of the metric unit and the number before any math occurs?
我的第二个问题是调用转换函数。我想在选择公制单位并在文本字段中输入数字后执行此操作，然后用户单击提交按钮。我应该带参数还是不带参数调用函数，特别是如果我使用 getElementById 在任何数学运算发生之前获取度量单位的值和数字时？
Would it be
可不可能是
onlick ="convertMeasure()"
or
或者
onclick = "convertMeasure(metric, numVal)"
采纳答案by T J
Assuming the id of submission buttons and text field are suband txtrespectively, and you've a default <option>like "choose unit" with value = 0:
假设提交按钮和文本字段的 id分别是sub和txt，并且您有一个默认值，<option>例如“选择单位” value = 0：
var button= document.getElementById("sub");
button.onclick= function(){
var select= document.getElementById("metric");
metricUnit = select[select.selectedIndex].value; //value selected in select
val = document.getElementById("txt").value; // value entered in text field
if(metricUnit!=0 && !isNaN(val)){ // make sure selected item is not default and the text in textbox is a number
convertMeasure(metricUnit, val); // call your function
}
}
回答by Gabriel
First get your select element
首先获取您的选择元素
var select = document.getElementById("metric");
and then you can go read the value from options with the selected index
然后您可以使用所选索引从选项中读取值
var metric = select.options[select.selectedIndex].value;
As for how to call the convertMeasure() method I would suggest the first one if you are going to get values from multiple elements on the fly.
至于如何调用 convertMeasure() 方法，如果您要即时从多个元素中获取值，我建议使用第一个方法。
Here is a jsfiddle to play with http://jsfiddle.net/zEncN/
这是一个与http://jsfiddle.net/zEncN/一起玩的 jsfiddle
回答by Will Newton
It seems like you're putting your click binding somewhere in the html like this
好像你把你的点击绑定放在这样的 html 中
<div onclick='callThisFunction()'> Click on this div </div>
Then in your javascript, you can have that function. In it, you can get the selected value of the drop down list and do whatever logic you need.
然后在您的 javascript 中，您可以拥有该功能。在其中，您可以获取下拉列表的选定值并执行您需要的任何逻辑。
<script>
function callThisFunction() {
var dropdown = document.getElementById("metric");
var unit = dropdown.options[dropdown.selectedIndex].value;
var nameOfUnit = dropdown.options[dropdown.selectedIndex].text;
if (unit == "cm") {
// do stuff
} else if (unit == "ml") {
// do stuff
}
// etc.
}
</script>
