訪問多個表單選項

Question

如何在JavaScript中使用兩種不同的select id來訪問表單中的多個選項值？

下面的代碼：（的jsfiddle：http://jsfiddle.net/sebastianonline/9yL4rv6j/）

（HTML5）

選擇你最喜歡的水果：

<select id="mySelect"> 
    <option value="apple">Apple</option> 
    <option value="orange">Orange</option> 
    <option value="pineapple">Pineapple</option> 
    <option value="banana">Banana</option> 
</select> 

點擊按鈕，返回所選擇的水果的價值。

選擇一個產品 金額

 <label><strong>Amount:</strong></label> 

     <select id="amount"> 
      <option selected>1</option> 
      <option>2</option> 
      <option>3</option> 
     </select> 

<!-- text value here --> 
<p id="include"></p> 
<p id="include2"></p> 

（JavaScript的）

function mySelect() 

{ 

    var x = document.getElementById("mySelect").selectedIndex; 
    var p = document.getElementsByTagName("option")[x].value; 
    document.getElementById("include").innerHTML = p; 

} 

    function myAmount() 

{ 

    var a = document.getElementById("amount").selectedIndex; 
    var b = document.getElementsByTagName("option")[a].value; 
    document.getElementById("include2").innerHTML = b; 

} 

功能mySelect（）能夠選擇正確的選項值，並且在第一段插入，然而，第二函數（myAmount（））選擇與第一個函數相同的選項，儘管它的id指向選擇id =「amount」。我需要第二個函數來選擇select id =「amount」中的選項並將其打印在p id =「include2」中。

Answer 1

您正在使用document.getElementsByTagName("option")，它返回文檔中的所有選項元素，不是當前選擇的所有選項。這當然意味着你的索引已經不存在了。

但是你可以使用select元素本身的特性.value在給定的選擇元素得到了選擇的選項的值：

function mySelect() { 
    var x = document.getElementById("mySelect").value; 
    document.getElementById("include").innerHTML = x; 
} 
function myAmount() { 
    document.getElementById("include2").innerHTML = 
             document.getElementById("amount").value; 
}