Riehle-Web.com

Comboboxen mit Javascript

Eingestellt am 19. März 2007 um 13:13 Uhr » WebDesign

Wer kennt das Problem nicht - wenn man in einem Formular Besuchern verschiedene Werte zur Auswahl geben möchte und trotzdem eine Möglichkeit bieten will eigene Texte zu formulieren, so steht man meist vor einem Problem. Auf Betriebssystem-Ebene gibt es hierfür die sogenannten Comboboxen, Browser kennen dieses Element für Webformulare jedoch nicht - hier also eine Variante ein ähnliches Verhalten mit Javascript nachzubasteln.

Für ein Webprojekt an dem ich derzeit arbeite habe ich mir dafür folgende Lösung überlegt, die auf Javascript basiert.

HTML-Code

<select id="feld_select" name="feld" onchange="ie_replace_caller(this, 'feld_own');">

  <option>--</option>

  <option>Option 1</option>

  <option selected="selected">Option 2</option>

  <option>Option 3</option>

</select>

<script type="text/javascript">

  var select_elem = document.getElementById('feld_select'); 

  var edit_option = new Option("Eigenen Text formulieren…", "", false, false);

  edit_option.onclick = function () { replace_select(this, 'feld_own'); }

  select_elem.options[select_elem.length] = edit_option;

  document.write('<input type="text" id="feld_own" name="" size="40" maxlength="50" '

    + 'style="display: none;" onblur="text_controll(this, \'feld_select\');" \/>');

</script>

Dieser Code definiert ein Select-Element, welches mit Javascript dynamisch um eine Option "Eigenen Text formulieren…" ergänzt wird. Nach dem Select-Element wird per Javascript noch ein Text-Feld eingefügt, welches aber per CSS ausgeblendet ist.

Javascript-Code

function AuswahlReset (elem) {

  for (i = 0; i < elem.length; i++)

    if (elem.options[ i ].defaultSelected == true)

      elem.options[ i ].selected = true;

}

function ie_replace_caller(elem, r_elem_id) {

  if(window.execScript) {

    if(elem.selectedIndex == elem.length - 1) {

      replace_select(r_elem_id);

    }

  }

}

function replace_select(elem, r_elem_id) {

  var r_elem = document.getElementById(r_elem_id);

  var oldname = elem.name;

  r_elem.name = oldname;

  elem.name = "";

  r_elem.style.display = "block";

  elem.parentNode.style.display = "none";

  r_elem.value = "Bitte Text eingeben…";

  r_elem.focus();

  r_elem.select();

  return false;

}

function text_controll(r_elem, elem_id) {

  var elem = document.getElementById(elem_id);

  if(r_elem.value == "Bitte Text eingeben…" || r_elem.value == "") {

    var oldname = r_elem.name;

    elem.name = oldname;

    r_elem.name = "";

    elem.style.display = "block";

    r_elem.style.display = "none";

    AuswahlReset(elem);

  } 

}

Um das jetzt noch ganz sauber zu programmieren könnte man natürlich den Javascript-Code noch in eine eigene Klasse packen und das HTML-Dokument durchscannen, sodass per Javascript alle Select-Elemente einer bestimmten Klasse auf diese Art und Weise erweitert werden - aber darauf habe ich hier jetzt mal verzichtet ;-)

Live-Demo

-- Option 1 Option 2 Option 3

Wie funktioniert es?

Mit den verwendeten Event-Handler wird bei der Auswahl des Eintrages "Eigenen Text formulieren…" das Select-Element ausgeblendet und stattdessen ein normales Textfeld angezeigt. Die Textbox erhält den Namen des Select-Elementes (nicht zu verwechseln mit der ID!) und das Select-Element erhält einen leeren Namen.

Verliert nun das Textfeld den Fokus, so wird geprüft ob in das Textfeld etwas eingegeben wurde. Ist dies nicht der Fall (Textfeld leer oder immer noch Standard-Text drin), so wird das Textfeld aus- und das Select-Element wieder eingeblendet. Die Namesänderung wird dabei ebenfalls wieder rückgängig gemacht.

Dieser Wechselvorgang ist beliebig oft wiederholbar. Dadurch, dass immer eines der Elemente einen leere Namen hat, ist sichergestellt, dass nie beide Elemente an den Server übertragen werden, wenn das Formular abgeschickt wird. Letztendlich kriegt der Server gar nichts davon mit, ob jetzt das Select-Element oder das Textfeld abgeschickt wurde.

Nachteile

Wenn der Besucher kein Javascript aktiviert hat, ist die Angabe eines alternativen Textes nicht möglich, jedoch funktioniert das Select-Element weiterhin ganz normal und kann nach wie vor entsprechend genutzt werden.

Im Falle meines Webprojektes ist es nicht weiter tragisch, wenn der User keine eigene Option formulieren kann, dann muss er halt mit einer der Standard-Optionen zufrieden sein. Als optionale Ergänzung halte ich diese Spielerei aber durchaus für sinnvoll.