kostenloser Webspace werbefrei: lima-city

Optionen eines SELECT-Feldes mittels JS/CSS formatieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   rnitsche

   

   rnitsche hat kostenlosen Webspace.

   22:50, 16.2.2011

   Hallo Community,
   ich habe ein tag/problem">Problem, bei dem der große Google zwar viel ausspuckt, aber leider doch nicht das dabei ist, was ich genau suche. Mein Problem ist, dass ich Optionen eines SELECT-Feldes formatieren will. Das geht ziemlich gut mit CSS. Ich will, dass vor einer Option immer ein bestimmtes Symbol angezeigt wird. Der CSS Befehl dazu lautet
   
   

   <style type="text/css" />
       option[value="1"]:before { content:url("images/gruen.gif"); }
       option[value="2"]:before { content:url("images/gelb.gif"); }
       option[value="3"]:before { content:url("images/rot.gif"); }
   </style>

   
   
   Nun möchte ich aber, dass diese Grafiken nicht sofort sondern nur bei einem Event geladen werden. Daher dachte ich mir, bei dem Event "onchange" ein JavaScript aufzurufen, was dann diese CSS Formatierung definiert.
   
   Über

   document.Testform.Auswahl.options

   können die Optionen angesprochen werden. Nur wie kann ich das CSS dann zuweisen?
   
   Danke für Eure Hilfe
   Ralf
   
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. metalmachine

   

   metalmachine hat kostenlosen Webspace.

   0:08, 17.2.2011

   Dazu dient das style-Objekt.
   
   Allerdings ist es, meines Wissens nach, nicht möglich Pseudoklassen über JS anzusprechen. Da musst du dir evtl. eine Alternative einfallen lassen (vielleicht funktioniert es, wenn man im <option>-Tag vor dem Beschriftungstext ein <span>-Tag einfügt, dass dann das Bild beinhaltet).
4. Autor dieses Themas

   rnitsche

   

   rnitsche hat kostenlosen Webspace.

   23:38, 22.2.2011

   Danke für den Tipp! Der war genau richtig und hat mein Problem gelöst
   
   Ich bin erst heute dazu gekommen, das mal auszuprobieren. Und da es nicht direkt auf Anhieb funktioniert hat, poste ich mal meine Lösung, vielleicht braucht das ja nochmal jemand.
   
   Wie metalmachine schon richtig erwähnte, kann man mit dem style-Objekt keine Pseudeklassen ansprechen, also bin ich dem Tipp mit dem span-Attribut gefolgt. Das Problem ist aber, dass OPTION und SPAN nicht verschachtelt werden können. Jedenfalls funktioniert das bei mir nicht. Aber man kann der Option eine Hintergrundgrafik mittels CSS vorgeben.
   
   

   <script type='text/javascript'>
   	function ladeOption () 
   	{
   		for (var i = 0; i < document.getElementsByTagName("option").length; i++)
   		{
   			document.getElementsByTagName("option")[i].style.paddingLeft = "27px";
   			document.getElementsByTagName("option")[i].style.height = "27px";
   		}
   		
   		document.getElementsByTagName("option")[0].style.backgroundImage = "url(/bilder/gruen.gif)";
   		document.getElementsByTagName("option")[1].style.backgroundImage = "url(/bilder/gelb.gif)";
   		document.getElementsByTagName("option")[2].style.backgroundImage = "url(/bilder/rot.gif)";
   		for (var i = 0; i < document.getElementsByTagName("option").length; i++)
   		{
   			document.getElementsByTagName("option")[i].style.backgroundRepeat = "no-repeat";
           	}
   	}
   </script>

   
   Wichtig war hier, dass backgroundRepeat später definiert wurde, daher auch unterhalb in einer extra Schleife. Als es noch oben in der Schleife stand wurde nur weißer Hintergrund anstatt der Grafik angezeigt.
   
   Ausgelöst habe ich das Laden der Grafiken dann mittels
   

   <select name='liste'  onfocus='ladeOption()'>.....</select>

   
   

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?