¿Cómo obtener el valor seleccionado anterior y nuevo de un elemento DOM de opción con JavaScript?

Si encuentras algún error en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes subir el código al proyecto final.

Solución:

Usando JavaScript y DOM directos, algo como esto (ejemplo en vivo):

var box, oldValue;

// Get a reference to the select box's DOM element.
// This can be any of several ways; below I'll look
// it up by ID.
box = document.getElementById('theSelect');
if (box.addEventListener) 
  // DOM2 standard
  box.addEventListener("change", changeHandler, false);

else if (box.attachEvent) 
  // IE fallback
  box.attachEvent("onchange", changeHandler);

else 
  // DOM0 fallback
  box.onchange = changeHandler;


// Our handler
function changeHandler(event) 
  var index, newValue;

  // Get the current index
  index = this.selectedIndex;
  if (index >= 0 && this.options.length > index) 
    // Get the new value
    newValue = this.options[index].value;
  

  // **Your code here**: old value is `oldValue`, new value is `newValue`
  // Note that `newValue`` may well be undefined
  display("Old value: " + oldValue);
  display("New value: " + newValue);

  // When done processing the change, remember the old value
  oldValue = newValue;

(Supongo que todo lo anterior está dentro de una función, como una función de carga de página o similar, como en el ejemplo en vivo, por lo que no estamos creando símbolos globales innecesarios [box, oldValue, ‘changeHandler`].)

Tenga en cuenta que el change El evento es generado por diferentes navegadores en diferentes momentos. Algunos navegadores generan el evento cuando cambia la selección, otros esperan hasta que el foco abandona el cuadro de selección.

Pero podría considerar usar una biblioteca como jQuery, Prototype, YUI, Closure o cualquiera de varias otras, ya que hacen que muchas de estas cosas sean mucho más fáciles.

Mire aquí: Obtener el valor de seleccionar (desplegable) antes del cambio, creo que es mejor,

(function () 
    var previous;

    $("select").focus(function () 
        // Store the current value on focus, before it changes
        previous = this.value;
    ).change(function() 
        // Do something with the previous value after the change
        alert(previous);
    );
)();

El siguiente fragmento de código puede ayudar

    
    
        
            SundayMonday
            TuesdayWednesday
        
        
    

Finalizando este artículo puedes encontrar las referencias de otros gestores de proyectos, tú todavía eres capaz insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador