Dropdown currentIndex onchange

Question

Gibt es ein Dropdown-Menü mit 5 Optionen. Derzeit ist Option 2 ausgewählt. der Benutzer wählt jetzt Option 4. das onchange-Ereignis wird abgefeuert, das in einer JS-Funktion abgefangen wird, die auf onchange auf dem Select wartet.

In der JS-Funktion kann ich leicht den Index der vom Benutzer ausgewählten Option überprüfen, indem ich die selectedIndex Ich möchte jedoch auch wissen, was der ursprüngliche Wert war, von dem aus der Benutzer ihn geändert hat.

Gibt es eine Eigenschaft, die fortbesteht grundsätzlich den ursprünglichen Wert, d. h. Option 2 in diesem Fall.

Answer 1

Nur als Konzept habe ich das Folgende zusammengestellt - vielleicht gibt es einen besseren Weg, dies zu tun:

var vals = [];

document.getElementById("colors").onchange = function(){
   vals.unshift(this.selectedIndex);
};

function getPrevious(){
  alert(vals[1]); // you'll need more logic here
                  // this is purposefully simplistic
}

--

<select id="colors">
   <option>Red</option>
   <option>Green</option>
   <option>Blue</option>
</select>

Geschlossenes Beispiel:

Ich habe versucht, dies alles mit dem eigentlichen Dropdown-Element selbst zu verbinden. Ehrlich gesagt ist dies das erste Mal, dass ich dem Dropdown-Element selbst Funktionen hinzufüge, daher kann ich nicht versprechen, dass dies keine Folgen haben wird:

   var colors = document.getElementById("colors");
       colors.vals = [];
       colors.setPrevious = function() { this.vals.unshift(this.selectedIndex); }
       colors.getPrevious = function() { return this.vals[1]; }
       colors.onchange    = function() { this.setPrevious(); this.getPrevious(); }
       // set initial state
       colors.setPrevious();

Answer 2

Nein, das müssen Sie selbst in einer js-Variable festhalten.

Answer 3

Wie von dl gesagt, können Sie einfache versteckte Variable zu verwenden, um den Wert zu halten.wir können den aktuellen Wert in versteckten varaible.

<input type = "hidden" id = "previous" name = "previous"></input>

Verwenden Sie onfocus="setPrevious(this.id)", um den aktuellen Wert zu setzen

JS

function setPrevious(id) {
    document.getElementById("previous").value = document.getElementById(id).selectedIndex ;
}

Verwenden Sie Onchange(), um die Ausgabe der Bestätigungsschaltfläche zu überprüfen und den "vorherigen" Wert zu setzen

document.getElementById(id).selectedIndex = document.getElementById("previous").value;