#1 10. Mai 2010 "Mehrzeilige" Auswahlliste Hi, ich habe mal wieder ein kleines, aber sehr nerviges Problem: Ich würde gerne eine mehrzeilige Auswahlliste (Dropdown- Menü) erstellen. Allerdings sollen nicht mehrere Auswahlmöglichkeiten direkt angezeigt werden, sondern der Text einer Auswahlmöglichkeit soll mehrzeilig (2-zeilig) sein. Ein normales <br> funktioniert aber leider nicht. HTML: <select> <option>Hallo <br> Test</option> <option>123</option> </select> Gibt es irgendeine Möglichkeit das zu erreichen? Bw ist für jede hilfreiche Antwort natürlich Ehrensache! Folgende Sprachen können eingesetzt werden: HTML/PHP/JS Edit: Falls ihr wissen wollt wofür ich das brauche: Ich erstelle momentan eine Website für mobile Endgeräte und der Text von den Auswahlmöglichkeiten ist zu lang. D.h. die Dropbox überdeckt andere Teile. + Multi-Zitat Zitieren
#2 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste geht nicht! kannst nur die weite einstellen. Code: <select style="width: 60px;"> <option>Hallo Test</option> <option>123</option> </select> // edit geht auch nur beim ie + Multi-Zitat Zitieren
#3 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste Mhh und was wenn du es einfach doppelt machst ? PHP: < select > < option > Hallo </ option > < option > Hallo 2 Zeile </ option > < option > 123 </ option > </ select > Und machst dann halt die selben Links. + Multi-Zitat Zitieren
#4 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste @onip: Das Einstellen der Breite ist kein Problem... allerdings ist der Bildschirm zu klein um das alles anzeigen zu können. @The Gr4ndp4: Hm... das wird wohl von den Mitarbeitern nicht gerade gern gesehen werden. Die legen einen hohen Wert auf die usability. Irgendeine Möglichkeit wird es da doch geben... !?!?! + Multi-Zitat Zitieren
#5 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste doppelter eintrag so ein quatsch, sorry. aber was wählt man den dann aus. usability = standard in diesem fall "geht nicht, gibts nicht" trifft leider nicht zu. // edit wie wäre diese variante Code: <p><input type="radio" name="x" value="1">Hallo<br />Test</p> <p><input type="radio" name="x" value="2">123</p> + Multi-Zitat Zitieren
#6 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste Du schreibst oben, JS sei möglich. Damit sollte es doch schon irgendwie gehen, stell ich mir allerdings recht aufwendig vor (für das Ergebnis). Bin auch kein Fan davon, aber mit "normalem" HTML wirst da wohl nicht so recht weiterkommen... Ansonsten evtl. bissl was ändern, also wenn du z.B. das hier hast (Aufzählungspunkte sind Einträge im Pulldown-Menü): , dann ist das natürlich recht lang. Das "Nachricht" sollte sowieso nicht mit drinstehen. Außerdem könntest du es aufteilen, im Sinne von: Dann wären in diesem Beispiel beide Pulldown-Menüs untereinander und verdecken sich nur gegenseitig. Macht aber nix, da du das zweite bei der ersten Auswahl nicht sehen musst... Ich hoff, du hast verstanden, was ich mein. Ansonsten nochmal lesen und falls es unklar ist, nachfragen :] viel Erfolg! + Multi-Zitat Zitieren
#7 10. Mai 2010 AW: "Mehrzeilige" Auswahlliste mit js isses möglich, aber nicht mit einem <select>-element. da musst du dein eigenes <select> nachbauen mit <div> und <span> etc... nix für anfänger. + Multi-Zitat Zitieren
#8 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste Danke erstmal für die Antworten. Wieso Quatsch? Das soll ja kein "doppelter Eintrag" sein, sondern ein mehrzeiliger. Das was ich entwickle gibt es nur so nicht. Deswegen gibt es hier sicher auch kein Standard. Doch. Man kann das schon entwickeln. Nur so wie ich mir das vorstelle ist das relativ aufwendig. In Java wüsste ich auch wie man das machen könnte. Bin mir nur nicht sicher ob das auch so bei JS funktioniert und ob es da nicht was einfacheres gibt. Kann ich so nicht machen. Das nimmt zu viel Platz auf dem Bildschirm weg. @bone: Das was du beschrieben hast ist meine momentane Notlösung. Bin allerdings nicht wirklich mit sowas zufrieden. Btw: Den Text (der Auswahlmöglichkeiten) in irgendeiner Weise kürzen geht nicht, aber das ist auch nicht das Problem. Sind immer 19 Zeichen. Das hab ich befürchtet. Naja... Java kann ich relativ gut. Weiß nur nicht ob ich mir da den Aufwand mit JS machen (weiß nicht wie gleich das ist). + Multi-Zitat Zitieren
#9 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste heut zu tage besteht fast jede seite aus JS. die meisten davon funktionieren nicht mehr, wenn JS aus ist und das ist aus meiner sicht ein fehler. bedenke also, du machst eigentlich ein einfaches formular und willst nur aus kosmetischer sicht ein select in JS programmieren. es gibt eine einfache formel die sich KISS nennt. keep it simple and stupid und bedenke dabei den kosten nutzen vaktor + Multi-Zitat Zitieren
#10 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste Ein Mehrzeilige Select Eintrag ist, wie andere schon geschrieben haben, nicht möglich! Mach deine normale Select-Liste und ersetzt sie mit Javacript dann mit einer Pseudo Select-Liste wie z.b. Onip schon geschrieben hat. Anders wird dein Vorhaben nicht möglich sein! P.s.: Java != JavaSCRIPT (Die abkürzung für Javascript ist JS) + Multi-Zitat Zitieren
#11 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste @onip: Mir ist schon klar was du meinst, aber ich entwickle keine normale Homepage. Die Seite ist nur im Intranet verfügbar und ist nur für mobile Endgeräte gemacht. Ob da nun Javascript aktiviert ist oder nicht darf ich entscheiden. Ich will das nicht aus kosmetischer Sicht machen, sondern um die Schnelligkeit der Bedienung zu erhöhen. KISS ist hier keineswegs sinnvoll! Einen Kosten/Nutzen- Faktor gibt es hier übrigens nicht. @Nanobyte: Weiß jetzt zwar nicht wo onip von einer "Pseudo Select-Liste" geredet hat, aber ich werde entweder selber eine Select- Liste nachbauen (weiß nicht ob du das gemeint hast), oder ich lass mir was anderes einfallen. Das ist mir schon klar!! ?( Sowohl dass das nicht das Gleiche ist, als auch dass die Abkürzung JS ist. Btw.: Ich bin zwar dankbar für die Antworten, aber ein bisschen mehr Nähe zum Topic fände ich nicht schlecht. Ich will nur wissen wie ich eine "mehrzeilige Auswahlliste" erstellen kann. Eine Lösung gibt es jetzt ja schon mal. + Multi-Zitat Zitieren
#12 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste Ich hab mich mal an einem Beispiel versucht. Das Beispiel hat allerdings keine "Dropdown"-Funktion, ich will dir ja nicht den ganzen Code zusammen schreiben Demo HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta name="language" content="Deutsch" /> <meta name="content-language" content="de"/> <!-- Inline Stylesheet --> <style type="text/css"> * { margin:0; padding: 0; } hr { display: none; } #wrapper { width: 215px; margin: 15px auto 0; } #ausgabe { margin: 12px; border: 1px solid #e0e0e0; } .pseudo-select-el { padding: 3px 5px; background-color: #f0f0f0; border: 1px solid #e0e0e0; width: 200px; cursor: pointer; } .pseudo-select-el div { margin: 8px 0; border-bottom: #d0d0d0; } .pseudo-select-el div:hover { background-color: #d0d0d0; } .pseudo-select-el div.selected { background-color: #ffd0d0; } </style> <!-- Extern Javascript --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <!-- Inline Javascript --> <script type="text/javascript"> $(function(){ $('.pseudo-select').each(function(){ $(this).hide(); var pseudoSelect = $('<div class="pseudo-select-el"/>'); $(this).before(pseudoSelect); $(this).find('option').each(function(){ $('<div/>').attr('v', $(this).val()).text($(this).text()).click(function(){ $(this).parent('div').find('div').removeClass('selected'); $(this).addClass('selected'); var value = $(this).attr('v'); var select = $(this).parent('div').next('select'); $(select).find('option').each(function(){$(this).attr('select','');}); $(select).find('option[value="'+value+'"]').attr('selected','selected'); }).appendTo(pseudoSelect); }); }); }); </script> <title>Pseudo - Select-List</title> </head> <body> <div id="wrapper"> <form action="" method="post"> <select name="selectit" class="pseudo-select"> <option value="test1">Ex posse vulputate inciderint eam, nec ea posse dolor delenit.</option> <option value="test2" selected="selected">Mel et ferri graeco sensibus.</option> <option value="test3">Errem rationibus.</option> <option value="test4">Ea recusabo suscipiantur mei.</option> <option value="test5">Vel illud nostro.</option> </select> <hr/><br /> <button type="submit">Abschicken</button> </form> </div> </body> </html> + Multi-Zitat Zitieren
#13 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste dieses script hab ich für das neue xup erstellt um die vorhandene sprachen zu wählen, da icons in <select>-boxen im ie net funktionieren. der code ist ein wenig komplex, schaut aber gut aus code entfernt ... siehe demo im ie gibts wohl noch einige bugs in der darstellung. demo findest du hier: entfernt damit du siehst was für ein *******ufwand das is ^^ + Multi-Zitat Zitieren
#14 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste @Nanobyte: Danke dir. Werde mir das morgen gleich mal anschauen. Denke dass ich das heute nicht mehr schaffen werde. @Murdoc: Danke!!!! Hm... doch ein wenig komplexer als ich dachte. :] Werde mir das aber heute auch nicht mehr anschauen können. Allerdings hab ich noch ein paar Fragen: - Muss Prototype auf jedem einzelnen Endgerät vorhanden sein? - Was ist SAU? + Multi-Zitat Zitieren
#15 11. Mai 2010 AW: "Mehrzeilige" Auswahlliste ne prototype musst du ganz normal als script einbinden. SAU = scriptaculous (ne effekt-lib für prototype) + Multi-Zitat Zitieren
#16 12. Mai 2010 AW: "Mehrzeilige" Auswahlliste Ok, thx. Ich melde mich auf jeden Fall nochmal bei dir wenn ich dein Code verwenden sollte. + Multi-Zitat Zitieren