javascript - 循环下拉列表

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>

将事件绑定(bind)到下拉列表的代码。

$(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