formulario - Obtenga el valor seleccionado de la opción con múltiples menús desplegables usando javascript

html dinamico ejemplos

Question

Tengo varias funciones que tienen múltiples opciones que deben actualizarse cuando se selecciona una opción. También necesito pasar una tercera parte de datos a través del elemento de atributo.

.getElementById() funciona para un solo menú desplegable, pero ¿cómo hago para que funcione cuando hay varios menús en la página?

He intentado var e = document.getElementsByClassName("testClass"); que no funcionó.

También traté de crear optionsText y optionsValue de la misma manera que optionsFtr se crea con var optionsValue = $(''option:selected'', this).value; y eso tampoco funcionó.

http://jsfiddle.net/8awqLek4/4/

código HTML

<ul>
    <li>
        <div class="ftrsTitle">BODY</div>
        <select class="testClass" id="testId">
            <option>Select</option>
            <option ftr="bod" value="blk">Black</option>
            <option ftr="bod" value="grn">Kelly Green</option>
            <option ftr="bod" value="red">Red</option>
            <option ftr="bod" value="roy">Royal</option>
        </select>
    </li>
    <li>
        <div class="ftrsTitle">TRIM</div>
        <select class="testClass">
            <option>Select</option>
            <option ftr="trm" value="blk">Black</option>
            <option ftr="trm" value="grn">Kelly Green</option>
            <option ftr="trm" value="red">Red</option>
            <option ftr="trm" value="roy">Royal</option>
        </select>
    </li>
</ul>
<div id="vars"></div>

Código Javascript

$(document).ready(function () {
    $("select").on(''change'', function () {
        var e = document.getElementById("testId");
        var optionsText = e.options[e.selectedIndex].text;
        var optionsValue = e.options[e.selectedIndex].value;
        var optionsFtr = $(''option:selected'', this).attr(''ftr'');
        $("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
    });
});

Answer 1

Esto debería hacerlo:

$(document).ready(function(){
    $("select").on(''change'', function(){
                var e = $(this).find("option:selected");
                $("#vars").html("<p>optionsText: " + e.text() + "</p><p>optionsValue: " + $(this).val() + "</p><p>optionsFtr: " + e.attr("ftr") + "</p>");
        });
});

usa la palabra clave this . Luego puede acceder al elemento seleccionado, y con Buscar en combinación con el selector :selected , puede encontrar el elemento de opción actualmente seleccionado.

http://jsfiddle.net/8awqLek4/5/

Answer 2

Para leer el valor de selección, simplemente puede usar $(this).val() . Para obtener la etiqueta de opción seleccionada, debe usar el método de text() .

El código fijo se ve así:

$("select").on(''change'', function () {
    var optionsText = $(''option:selected'', this).text();
    var optionsValue = $(this).val();
    var optionsFtr = $(''option:selected'', this).attr(''ftr'');
    $("#vars").html("<p>optionsText: " + optionsText + "</p><p>optionsValue: " + optionsValue + "</p><p>optionsFtr: " + optionsFtr + "</p>");
});

Demostración: http://jsfiddle.net/8awqLek4/3/