AgentOrange: mehrere Formatierungen in einem option value

Hallo liebe Forumgemeinde,

ich habe folgendes Problem:

Ich habe eine Auswahlliste (select) in denen die Tage eines Monats angezeigt werden. Die Tage sind dann dementsprechend die einzelnen option value. Ich möchte gerne die Tage als Zahl und dahinter die Tage als Wochentag anzeigen lassen.

z.B.

1. Dienstag
2. Mittwoch
3. Donnerstag

usw

Die Tage als Zahl sollen fett angezeigt werden, die Tage als Wochentag allerdings normal. Ist sowas möglich?

Danke im Vorraus,

AgentOrange

  1. Hallo, Baumentlauber!

    Es ist zumindest nicht auf direktem Weg möglich, da http://de.selfhtml.org/html/referenz/elemente.htm#option zeigt, dass in der option keine Childknoten (außer PCDATA) erlaubt sind und css für _einen_ Knoten meines Wissens keine multiplen Schriftformatierungen zulässt.

    Möglich ist es wahrscheinlich trotzdem, aber man müßte hierfür das select/option Element neu schreiben/emulieren mittels mehrerer inputs deren Sichtbarkeit mittels style: display und/oder style: visibility geregelt wird und die ebenfalls mittels css neu geshapt werden müßten (also ein "langer Weg..")

    Viele Grüsse,
    Richard

    1. Ich hatte es fast befürchtet. Vielen Dank für die schnelle Antwort.

      Gruß AgentOrange

      1. Ich hatte es fast befürchtet. Vielen Dank für die schnelle Antwort.

        Gruß AgentOrange

        du kannst dir aber problemlos eine ein dropdown-menu basteln (unsortierte liste) und das nach deinen wünschen gestalten (benötigt javascript) jeder der kein javascript hat, bekommts gewöhnlich angezeigt

        1. @@suit:

          du kannst dir aber problemlos eine ein dropdown-menu basteln (unsortierte liste)

          Unsortiert? Wo er doch '1.', '2.', '3.' vor den Items stehen haben möchte?

          Live long and prosper,
          Gunnar

          --
          „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
          1. Unsortiert? Wo er doch '1.', '2.', '3.' vor den Items stehen haben möchte?

            natürlich ist eine sortierte liste in diesem fall semantisch richtiger, nur wird da wieder das problem der getrennten formatierung von zahl und text auftauchen

            schöne Lösung (wenn man schon ein Dropdown mit einer Liste nachbaut), aber gemeinsame Formatierung für Aufzählungsnummern und Text:

              
            <ol>  
              <li>blah</li>  
              <li>blub</li>  
            </ol>  
            
            

            die Notlösung, darum ein Konstrukt in diese Richtung:

              
            <ul>  
              <li><span>1.</span> blah</li>  
              <li><span>2.</span> blub</li>  
            </ul>  
            
            
            1. @@suit:

              schöne Lösung (wenn man schon ein Dropdown mit einer Liste nachbaut), aber gemeinsame Formatierung für Aufzählungsnummern und Text:

              <ol>
                <li>blah</li>
                <li>blub</li>
              </ol>

                
              Ja, an die Aufzählungsnummern kommt man dann wohl nicht mehr ran. Hilft nur, sie nicht zu verwenden und eigene zu generieren (CSS-fähigen Browser vorausgesetzt):  
                
              ~~~css
              ol  
              {  
               counter-reset: myCounter;  
               list-style: none;  
              }  
                
              li:before  
              {  
               content: counter(myCounter) ".";  
               counter-increment: myCounter;  
               display: marker;  
               font-weight: bold;  
               padding-right: 1em;  
              }  
              
              

              die Notlösung, darum ein Konstrukt in diese Richtung:

              <ul>
                <li><span>1.</span> blah</li>
                <li><span>2.</span> blub</li>
              </ul>

                
              Das wäre immer noch eine numerierte Liste 'ol'.  
                
              Eine bessere Notlösung wäre aber  
                
              ~~~html
              <ol>  
                <li><span>blah</span></li>  
                <li><span>blah</span></li>  
              </ol>
              
              li  
              {  
               font-weight: bold;  
              }  
                
              li span  
              {  
               font-weight: normal;  
              }
              

              Live long and prosper,
              Gunnar

              --
              „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
              1. <ol>

                <li><span>blah</span></li>
                  <li><span>blah</span></li>
                </ol>

                  
                In der Tat, auf das hier wär ich jetzt garnich gekommen - das is natürlich wesentlich besser