Loop over Dropdownlist

Question

Я хочу перечеркнуть Dropdownlist и записать значение выбранного элемента в метку. Я делал это раньше с помощью кнопок «Радио», но с выпадающим списком он не будет работать. Теперь, код.

Вот сгенерированные HTML-коды. Ценности не интересны.

<select id="alternativeNumbers" name="alternativeNumbers"> 
    <option value="1_A">Text</option> 
    <option value="2_B">Text</option> 
    <option value="3_C">Text</option> 
    <option value="4_D">Text</option> 
    <option value="5_E">Text</option> 
    <option value="6_F">Text</option> 
</select> 

Код для привязки события к раскрывающемуся списку.

$(function() { 
    var dropdown = document.getElementsByName("alternativeNumbers"); 
    $(dropdown).change(function() { 
     updateAlternativeDropdown(); 
    }); 
}); 

И, наконец, метод, который вызывается событием. Это должно заполнить этикетки.

function updateAlternativeDropdown() { 
    var dropdown = document.getElementsByName("alternativeNumbers"); 
    var lengthDropDown = addAlternativeArticleNumberDropdown.length; 
    for (var i=0; i < lengthDropDown; i++) 
    { 
     //This alert is for the behavior of the output! 
     alert(addAlternativeArticleNumberDropdown[i].value); 
     if (addAlternativeArticleNumberDropdown[i].selected) { 
      var valueOfDropdown = addAlternativeArticleNumberDropdown[i].value; 
      var splittedValues = valueOfDropdown.split("_"); 
      document.getElementById("label1").innerText = splittedValues[0]; 
      document.getElementById("label2").innerText = splittedValues[1]; 
     } 
    } 
}; 

Я надеюсь, что это достаточно информации, то теперь проблема/Текущее поведение:

Метод updateAlternativeDropdown() вызывается нормально, но тревога внутри цикла возвращает значение первого элемента, значение выбранного элемента и 3 раза. (Думаю, из-за 6 элементов в этом элементе)

Кроме того, из-за этого мой оператор if не вводится. В настоящее время я не знаю, откуда эта проблема.

Заранее спасибо.

Answer 1

Вам не нужно указывать варианты выпадающего списка. Вы можете получить доступ с выбранной опцией, как это:

dropdown.options[dropdown.selectedIndex].value 

Обновите updateAlternativeDropdown функция:

function updateAlternativeDropdown() { 
 
    var dropdown = document.getElementById("alternativeNumbers"), 
 
     splittedValues = dropdown.options[dropdown.selectedIndex].value.split('_'); 
 
    document.getElementById("label1").innerHTML = splittedValues[0]; 
 
    document.getElementById("label2").innerHTML = splittedValues[1]; 
 
} 
 

 
$('#alternativeNumbers').change(updateAlternativeDropdown);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
label1: <span id="label1">-</span><br /> 
 
label2: <span id="label2">-</span><br /> 
 
<select id="alternativeNumbers" name="alternativeNumbers"> 
 
    <option value="1_A">Text</option> 
 
    <option value="2_B">Text</option> 
 
    <option value="3_C">Text</option> 
 
    <option value="4_D">Text</option> 
 
    <option value="5_E">Text</option> 
 
    <option value="6_F">Text</option> 
 
</select>

working Example