将HTML下拉菜单值传递给JavaScript函数和onclick函数调用

Question

我知道已经以多种方式提出了这个问题，但是它们并没有帮助我，并且在尝试调试时出现“未定义”错误。

很简单：我有一个HTML下拉菜单，上面有几个不同的度量单位，并且给了每个值。 我想将所选值传递给JavaScript函数，该函数将检查度量单位类型，然后将其转换为相应的英语单位。

下拉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>

我的JavaScript函数尝试传递值：

metricUnit = document.getElementById("metric").value;

我的第二个问题是调用转换函数。 一旦选择了公制单位，并在文本字段中输入了一个数字，然后用户单击提交按钮，我就想这样做。 我应该调用带参数还是不带参数的函数，特别是如果我使用getElementById来获取度量单位的值和任何数学运算之前的数字？

可不可能是

onlick ="convertMeasure()"

要么

onclick = "convertMeasure(metric, numVal)"

Answer 1

假设提交按钮的ID和文本字段的ID分别是sub和txt ，并且您有一个默认的<option>如“ choose unit”，其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
   }
 }

Answer 2

首先获取您的选择元素

var select = document.getElementById("metric");

然后您可以从具有选定索引的选项中读取值

var metric = select.options[select.selectedIndex].value;

至于如何调用convertMeasure（）方法，如果您要即时从多个元素中获取值，建议使用第一个方法。

这是一个可与http://jsfiddle.net/zEncN/一起玩的jsfiddle

Answer 3

好像您是将点击绑定放在html这样的某处

<div onclick='callThisFunction()'> Click on this div </div>

然后在您的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>