將HTML下拉菜單值傳遞給JavaScript函數和onclick函數調用

我知道這個問題已經有幾種方式提出了，但是他們沒有幫助我，當我嘗試調試這個時遇到了「undefined」錯誤。將HTML下拉菜單值傳遞給JavaScript函數和onclick函數調用

很簡單：我有一個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)"

來源

2014-04-03 CraneWing

偏題：您的「for」屬性與select的「id」不匹配。 – isherwood

想知道答案是否有幫助... –

@CraneWing做了什麼答案幫助？如果是這樣，你可以接受其中之一嗎？這將有助於未來的讀者。 – MERose

假設提交按鈕和文本字段的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 
    } 
}

來源

2014-04-03 18:05:32

首先讓您選擇元素

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

，然後你可以去選擇的索引

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

至於如何調用convertMeasure（）方法，我建議第一個，如果讀選項的值你將從動態獲取多個元素的值。

這裏是http://jsfiddle.net/zEncN/

來源

2014-04-03 18:09:25 Gabriel

發揮的jsfiddle好像你把你的點擊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>

來源

2014-04-03 18:10:54

將HTML下拉菜單值傳遞給JavaScript函數和onclick函數調用

回答

相關問題