循環顯示下拉列表

我想循環顯示下拉列表並將所選項目的值寫入標籤。我以前用選擇單選按鈕來完成它，但是下拉列表不起作用。現在，一些代碼。循環顯示下拉列表

這裏是生成的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>

將事件綁定到Dropdownlist的代碼。

$(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語句。目前，我對這個問題來自哪裏毫無頭緒。

在此先感謝。

來源

2011-12-20 Thomas

您不必迭代下拉選項。您可以訪問選定的選項是這樣的：

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

來源

2011-12-20 21:13:33

這是令人難以置信的速度快，工作得很好。你找不到更好的專業支持。非常感謝。 – Thomas 2011-12-20 21:18:12

循環顯示下拉列表

回答

相關問題