Доступ к нескольким опциям формы

Question

Как получить доступ к нескольким значениям параметров в форме под двумя разными идентификаторами выбора с помощью JavaScript?

Вот код: (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 = "amount". Мне нужна вторая функция, чтобы выбрать опции в select id = "amount" и напечатать ее в p id = "include2".

Answer 1

Вы используете document.getElementsByTagName("option"), который возвращает все элементы опций в документе , не все параметры для текущего выбора. Это, конечно, означает, что индексирование отсутствует.

Но вы можете получить значение выбранного опциона в данном выберите элемент, используя .value свойство самого выбора элемента:

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