Question

我想遍历Dropdownlist并在标签中写入所选Item的值。我之前已经选择了单选按钮，但是使用下拉列表它将无法正常工作。现在，一些代码。

以下是生成的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

循环下拉列表

1 个答案: