循环下拉列表

Question

我想遍历一个下拉列表并将所选项目的值写入标签中。 我之前已经通过选择单选按钮完成了此操作，但使用下拉列表将无法正常工作。 现在，一些代码。

这里是生成的 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() 被正常调用，但循环内的警报返回第一个元素的值、选定元素的值和 this 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