Mehr Kontrolle über eine Select-Schaltfläche mit JavaScript

18. März 2011 - HTML, JavaScript

Wenn man ein Select in einem Formular verwendet, kann es hilfreich sein, wenn man den Status des Selects überwachen kann – besonders dann, wenn durch die Änderung der Select-Auswahl ein neuer Datensatz aktiviert wird. Möglich ist dies mit Javascript.

English Summary: select controls in forms may be used for convenience to input text. If a select control is bound to a dataset, it may be necessary to monitor it’s behaviour with JavaScript.

In einem Projekt wird über ein Select gesteuert, welcher Datensatz behandelt werden soll. Der Benutzer kann den Datensatz ändern oder löschen. Ändert er die Daten, muss man den Zustand des Selects bis zum Speichern der Daten überwachen, damit der Datensatz nicht falsch zugeordnet wird.

Hier ist ein Javascript dazu:

jQuery(document).ready(function() {
var capt=jQuery('select.critical_click_select').val();
var cnpt;
 
jQuery('select.critical_click_select').change(function() {
cnpt=jQuery('select.critical_click_select').val();});

if (cnpt == capt) { // passiert beim Rücksetzen der selektion; mach nix
} else {
  if (.. der Benutzer hat die Daten verändert..) {
  var jj=confirm("Wenn Du jetzt einen neuen Datensatz wählst und dann die Änderungen speicherst, werden sie\n zum neuen Datensatz hinzugefügt.\n Fortsetzen?");
  if (jj) {
   capt=cnpt;
  } else {jQuery('select.critical_click_select').val(capt);}
 } else { capt=cnpt; // normale Änderung, mach nix
 }
}  

 });

Das Select hat die Klasse .critical_click_select. Zunächst wird der aktuelle Zustand in capt gespeichert. Wenn das Select verändert wird, speichert man den neuen Zustand in der Variablen cnpt. Dann muss man feststellen, ob Änderungen an den Daten vorgenommen wurden. In dem Confirm-Dialog fragt man den Benutzer, ob er den Datensatz wechseln möchte. Wenn nein, stellt man den ursprünglichen Status wieder her.

Wenn keine Änderung erfolgt ist, kann man die Select-Änderung „durchgehen“ lassen.