Ergebnis 1 bis 6 von 6
  1. #1
    XFiled ist offline Jungspund
    registriert
    11-10-2005
    Ort
    Bonn
    Beiträge
    24

    editierbare ComboBox (very simple...)

    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(ComboBoxDummyEditDummy)
    {
        if (
    document.getElementById(ComboBoxDummy).value == 0)
        {
            
    document.getElementById(ComboBoxDummy).style.display 'none';
            
    document.getElementById(EditDummy).style.display 'block';
        }
    }

    function 
    EintragHinzufuegen(ComboBoxDummyEditDummy)
    {
        if (
    event.keyCode == 13)
        {
            
    NeuerEintrag = new Option(document.getElementById(EditDummy).valuedocument.getElementById(EditDummy).valuefalsetrue);
            
    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.

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: editierbare ComboBox (very simple...)

    Dumm nur, dass es nicht funktioniert.

  3. #3
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: editierbare ComboBox (very simple...)

    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.appendChildinput );
             
    el.style.display 'none';
             
    input.onblur = function()
             {
                  var 
    new_val input.value;
                  
    el.style.display '';
                  
    el.parentNode.removeChildinput );
                  if(
    new_val)
                  {
                      var 
    = new Option(new_valnew_val);
                      var 
    el.options.length;
                      var 
    tmp el.options[1];
                      
    el.options[-1] = o;
                      
    el.options[l] = tmp;
                      
    el.selectedIndex 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> 

  4. #4
    XFiled ist offline Jungspund
    registriert
    11-10-2005
    Ort
    Bonn
    Beiträge
    24

    AW: editierbare ComboBox (very simple...)

    Also, im IE6 und Opera läuft es bei mir tadellos!
    Das es im Firefox nicht will, ist mir jetzt erst aufgefallen...

  5. #5
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: editierbare ComboBox (very simple...)

    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.

  6. #6
    Sport07DE ist offline Grünschnabel
    registriert
    17-05-2009
    Beiträge
    1

    AW: editierbare ComboBox (very simple...)

    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.

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 15-12-2005, 13:15
  2. Formular: action abhängig von Combobox
    Von JohnS im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 11-08-2004, 16:34

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •