Quiero bucle encima de un Dropdownlist y escribir el valor del Elemento seleccionado en una etiqueta.
Lo he hecho antes con una selección de los botones de la Radio, pero con el dropdownlist no va a funcionar.
Ahora, algo de Código.

Aquí está el Código HTML generado Valores no son interesantes.

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

El Código para enlazar el evento para el Dropdownlist.

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

Y, finalmente, el método que es llamado por el evento. Esto debe rellenar las etiquetas.

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

Espero que esta información es suficiente, ahora el Problema /comportamiento Actual:

El método updateAlternativeDropdown() es llamado bien, pero luego de la alerta dentro del bucle devuelve el valor del primer elemento, el valor del elemento seleccionado y esto 3 veces. (Supongo que porque de los 6 elementos en este elemento)

Además debido a esto mi si-declaración de no entró. Actualmente me#m tipo de ni idea de donde esta el problema.

Gracias de antemano.

InformationsquelleAutor Thomas | 2011-12-20

1 Comentario

  1. 5

    Usted no tiene que recorrer desplegable de opciones. Puede acceder a la opción seleccionada como este:

    dropdown.options[dropdown.selectedIndex].value

    Actualización de su updateAlternativeDropdown función:

    JS:

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

    HTML:

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

    Ejemplo de trabajo

    • Eso fue increíble, rápido y funciona muy bien. Usted no puede encontrar un mejor apoyo Profesional. Muchas gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here