javascript - Loop over Dropdownlist - Stack Overflow

admin管理员组

文章数量:1312651

I want to loop over a Dropdownlist and write the value of the selected Item in a label. I've done it before with a selection of Radio buttons but with the dropdownlist it won't work. Now, some Code.

Here is the generated HTML Code Values are not interesting.

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

The Code to bind the event to the Dropdownlist.

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

And finally the method which is called by the event. This should fill the labels.

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];
        }
    }
};

I hope this is enough information, now the Problem / Current behavior:

The method updateAlternativeDropdown() is called fine but then the alert inside the loop returns the value of first element, value of the selected element and this 3 times. (I guess because of the 6 elements in this element)

Furthermore because of this my if-statement isn't entered. Currently I#m kind of clueless where this problem es from.

Thanks in advance.

I want to loop over a Dropdownlist and write the value of the selected Item in a label. I've done it before with a selection of Radio buttons but with the dropdownlist it won't work. Now, some Code.

Here is the generated HTML Code Values are not interesting.

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

The Code to bind the event to the Dropdownlist.

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

And finally the method which is called by the event. This should fill the labels.

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];
        }
    }
};

I hope this is enough information, now the Problem / Current behavior:

The method updateAlternativeDropdown() is called fine but then the alert inside the loop returns the value of first element, value of the selected element and this 3 times. (I guess because of the 6 elements in this element)

Furthermore because of this my if-statement isn't entered. Currently I#m kind of clueless where this problem es from.

Thanks in advance.

• javascript
• jquery
• html
• drop-down-menu

Share Improve this question Follow asked Dec 20, 2011 at 21:01 ThomasThomas 6711 gold badge22 silver badges66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You don't have to iterate dropdown's options. You can access selected option like this:

dropdown.options[dropdown.selectedIndex].value

Update your updateAlternativeDropdown function:

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./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

本文标签： javascriptLoop over DropdownlistStack Overflow