Schmusi: Multiples Auswahlfeld löschen

Hallo,

ich habe mehrere Multiple Auswahlfelder, die z.b. so aussehen:

<select name="catid[]" id="catid" multiple size="5">

Dann entsprechend die Einträge und ein </select>. Mein Form heißt myview.
Die User können in den verschiedenen Feldern mehrere Werte auswählen und ALLES per Zurücksetzen wieder löschen.

Nun kam eine Anfrage, ob man nicht pro Feld einen Button machen könnte, auf dessen Click das entsprechende Feld gecleart wird - alle anderen Auswahlen sollen bestehen bleiben.

Ich habs jetzt mal mit folgendem probiert, aber javascript bin ich nunmal noch Anfänger und irgendwie finde ich in SELFHTML nichts brauchbares.

<input type="button" onclick="document.myview.catid.values='';">

Hoffe ihr könnt mir weiterhelfen.

Danke, eure Schmusi

  1. Hallo,

    ich habe mehrere Multiple Auswahlfelder, die z.b. so aussehen:

    <select name="catid[]" id="catid" multiple size="5">

    Dann entsprechend die Einträge und ein </select>. Mein Form heißt myview.
    Die User können in den verschiedenen Feldern mehrere Werte auswählen und ALLES per Zurücksetzen wieder löschen.

    Nun kam eine Anfrage, ob man nicht pro Feld einen Button machen könnte, auf dessen Click das entsprechende Feld gecleart wird - alle anderen Auswahlen sollen bestehen bleiben.

    Ich habs jetzt mal mit folgendem probiert, aber javascript bin ich nunmal noch Anfänger und irgendwie finde ich in SELFHTML nichts brauchbares.

    <input type="button" onclick="document.myview.catid.values='';">

    Die Eigenschaft "values" gibt es nicht; auch nicht bei SELECTs mit Attribut "mulitiple". Unglücklichgerweise liefert aber auch die Eigenschaft "value" eines multiple-SELECTs nur den _ersten_ ausgewählten Wert und nicht alle - siehe http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-94282980. Es bringt deshalb auch nichts, statt "values" eben "value" leer zu setzten.

    Was man machen kann ist, bei Klick auf den Button eine Funktion zu starten, welche die komplette options-Collection des SELECTs durchläuft und alle OPTION-Elemente auf selected = false setzt.

    Beispiel:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
    <title>Clear multiple-SELECT</title>  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
    <script type="text/javascript">  
    <!--  
    function clearCatid() {  
     var mySelectCatid = document.getElementById("catid");  
     for (var i = 0; i < mySelectCatid.options.length; i++) {  
      mySelectCatid.options[i].selected = false;  
     }  
    }  
    //-->  
    </script>  
    </head>  
    <body>  
    <form action="#" method="get">  
    <p>  
    <select name="catid[]" id="catid" multiple size="5">  
    <option>o1</option>  
    <option>o2</option>  
    <option>o3</option>  
    <option>o4</option>  
    <option>o5</option>  
    </select>  
    <input type="button" value="clearCatid" onclick="clearCatid();">  
    </p>  
    </form>  
    </body>  
    </html>
    

    viele Grüße

    Axel