editierbare ComboBox (very simple...)

**XFiled** · 01-03-2007 12:48

Hallo zusammen,

hier eine sehr einfache Umsetzung einer editierbaren ComboBox.
Sofern der gewünschte Eintrag nicht vorhanden ist,wählt man Eintrag einfügen,
welches die ComboBox unsichtbar, und die EditBox sichtbar werden läßt.
Man kann nun den gewünschten Eintrag formulieren und mit Enter bestätigen,
wodurch man wieder in der ComboBox landet und der eben formulierte Eintrag
ausgewählt ist.

PHP-Code:


<html>

<head>

<script type="text/javascript">

function EintragPruefen(ComboBoxDummy, EditDummy)

{

    if (document.getElementById(ComboBoxDummy).value == 0)

    {

        document.getElementById(ComboBoxDummy).style.display = 'none';

        document.getElementById(EditDummy).style.display = 'block';

    }

}



function EintragHinzufuegen(ComboBoxDummy, EditDummy)

{

    if (event.keyCode == 13)

    {

        NeuerEintrag = new Option(document.getElementById(EditDummy).value, document.getElementById(EditDummy).value, false, true);

        document.getElementById(ComboBoxDummy).options[document.getElementById(ComboBoxDummy).length] = NeuerEintrag;

        document.getElementById(EditDummy).value = "";



        document.getElementById(EditDummy).style.display = 'none';

        document.getElementById(ComboBoxDummy).style.display = 'block';

    }

}

</script>

</head>



<body>

<select name="ComboBox" size="1" style="position:absolute; left:8; top:8; width:88; height:22; display:block;" onchange="EintragPruefen('ComboBox', 'Edit')">

    <option value="1">1. Eintrag</option>

    <option value="2">2. Eintrag</option>

    <option value="3">3. Eintrag</option>

    <option value="0">Eintrag einfügen</option>

</select>



<input type="text" name="Edit" style="position:absolute; left:8; top:8; width:88; height:22; display:none;" onkeypress="EintragHinzufuegen('ComboBox', 'Edit')">

</body>

</html>

Viel Spaß
XFiled

P.S.: der Umsetzung lag folgender Quelltext zugrunde.

**ein schlauer** · 01-03-2007 13:01

Dumm nur, dass es nicht funktioniert.

**ein schlauer** · 01-03-2007 13:25

und hier ein halbwegs funktionierendes (FF 2.0/IE 7):

PHP-Code:


<!doctype html public "-//w3c//dtd html 4.0//en"

       "http://www.w3.org/tr/rec-html40/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Combobox</title>

<script type="text/javascript">

function comboBox(el)

{

    var val = el.options[el.selectedIndex].value;

    if(!val)

    {

         var input = document.createElement('input');

         el.parentNode.appendChild( input );

         el.style.display = 'none';

         input.onblur = function()

         {

              var new_val = input.value;

              el.style.display = '';

              el.parentNode.removeChild( input );

              if(new_val)

              {

                  var o = new Option(new_val, new_val);

                  var l = el.options.length;

                  var tmp = el.options[l - 1];

                  el.options[l -1] = o;

                  el.options[l] = tmp;

                  el.selectedIndex = l - 1;

              }

         };

    }

}

</script>

</head>



<body>

<form action="#">

<select size="1" onchange="comboBox(this);">

    <option value="1">1. Eintrag</option>

    <option value="2">2. Eintrag</option>

    <option value="3">3. Eintrag</option>

    <option value="">&lt;Neuer Eintrag&gt;</option>

</select>



</form>



</body>

</html>

**XFiled** · 01-03-2007 13:33

Also, im IE6 und Opera läuft es bei mir tadellos!

Das es im Firefox nicht will, ist mir jetzt erst aufgefallen...

**ein schlauer** · 01-03-2007 13:47

im IE hab ich's gar nicht erst getestet und Opera hab ich hier grad nicht. Aber da sind halt ein paar Unsauberkeiten drin

- kein DOCTYPE => Quirksmode = immer schlecht!
- keine Einheiten in den Styleangaben
- getElementById um auf Elemente zu zugreifen, die gar keine ID haben
- window.event Objekt existiert nicht in allen Browsern.

**Sport07DE** · 17-05-2009 10:35

Hallo Ein Schlauer,

das funktioniert bei mir im Seamonkey ganz gut. Wie kann ich dem erzeugten Editfeld die gleiche CSS-Klasse mitgeben, damit es auch richtig aussieht?
Ist es möglich, dieses dauerhaft anzuzeigen, so dass man nicht ersta auf neuer Eintrag gehen muss.

Ich möchte das in meinem EMail-Client einsetzen und die Wahl von bekannten E-Mail-Adresse soll optional sein.

Thema: editierbare ComboBox (very simple...)

LinkBack

Themen-Optionen

Anzeige

editierbare ComboBox (very simple...)

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: editierbare ComboBox (very simple...)

AW: editierbare ComboBox (very simple...)

AW: editierbare ComboBox (very simple...)

AW: editierbare ComboBox (very simple...)

AW: editierbare ComboBox (very simple...)

Ähnliche Themen

Durch auswahl eines Combobox Items neue Combo einfügen

Formular: action abhängig von Combobox

Lesezeichen

Lesezeichen

Berechtigungen