WCM Forum - Editierbares Auswahlmenue?

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - Editierbares Auswahlmenue? (http://www.wcm.at/forum/showthread.php?t=211854)

Editierbares Auswahlmenue?

Weiss jemand, wie man ein Auswahlmenue macht, wo man den gewaehlten Wert editieren kann, bevor man das Formular absendet?

Also als Denkansatz ungefaehr so:

PHP-Code:


		
			
<select size='1' name='betrag'>

 <option><input name='betrag' value='100'></option>

 <option><input name='betrag' value='200'></option>

 <option><input name='betrag' value='300'></option>

</select>

Das funktioniert natuerlich SO NICHT! Deshalb ja meine Frage . . .

Ich haette gerne das Menue fuer gebraeuchliche Werte zur Grobauswahl. Wenn ich einmal "256" absenden moechte, dann waehle ich z.B. 200 und editiere es wie in einem Input-Feld auf 256.

lg
ff

Das wäre dann eine Combo Box, die gibt es aber nicht als HTML Form Element (wäre mir zumindest nicht bekannt)

http://www.cs.tut.fi/~jkorpela/forms/combo.html

lg zAPPEL

ohne JS geht es nicht...

EDIT: doch, aber nur mit dem browserinternen autovervollständigen *gg*

Man könnte natürlich bei einem Klick auf das Input Field ein Div darunter zeigen, bei dem man Werte auswählen kann, die mit einem onclick ins Input Field geschrieben werden.

Geht natürlich nur mit Javascript.

genau, das wäre eine lösung, die optisch und funktionell einer combobox entspricht...

Na dann danke ich einmal recht herzlich fuer eure Tipps!

Praktisch ist die Sache allemal und wenn ich die eine oder andere Variante in einer php-Funktion untergebracht habe, kommt sie sicher oft zum Einsatz, und dient mit nur einem einzigen Formular zum Auswaehlen UND zum Neuanlegen von Werten in einer db.

Entdeckt habe ich die Sache im Kalender von Outlook. Da kann man nur bestimmte Uhrzeiten z.B. 14:30 auswaehlen, aber dann sofort auf 14:10 editieren. Also dachte ich, das waere doch auch in einem Web-Formular praktisch . . .

lg
ff

html-combobox v0.1

hallo!

mir war gerade ein wenig "fad":

Code:

<html><head><title></title></head>

<body>

<form action="" method="get">

<input id="combo1" type="text" style="width:150px" /><span onclick="document.getElementById('combo1_options').style.display='block'" style="cursor:pointer">V</span>

<div id="combo1_options" style="display:none;width:150px;padding:5px;border:1px solid black;overflow:auto">

        <span onclick="document.getElementById('combo1').value='auswahl 1';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 1</span>




        <span onclick="document.getElementById('combo1').value='auswahl 2';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 2</span>




        <span onclick="document.getElementById('combo1').value='auswahl 3';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 3</span>




        <span onclick="document.getElementById('combo1').value='auswahl 4';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 4</span>

</div>

</form>





text danach...</p>

</body>

</html>

ist nur eine einfache, unsauber codierte aber funktionierende lösung... mit ein paar verbesserungen sieht es sicher gleich noch viel besser aus! ;) :D

Also nachdem ich jetzt wusste, dass ich eine "Combo-Box" will, und damit nicht eine (Bass)gitarrenbox mit integriertem Verstaerker gemeint ist, habe ich ein wenig gegoogelt und einige getestet.

Nachdem aber da manche Combo-Box-Scripts laenger als mein Hauptscript sind, stelle ich mit Freuden fest, dass es hier im Forum helle Koepfe gibt, die selbst beim Fadisieren bessere Ergebnisse liefern!

Bravo und danke void!

lg
ff

PS: Falls du dich wieder einmal fadisierst . . . vielleicht faellt dir noch die Modifikation ein, sodass die Select-Box in einer hoeheren Ebene aufgeht und die restlichen Formularelemente nicht verschiebt . . . ;)

So irgendwie müsste das funktionieren.. also die Input Box relativ positionieren und das Div in dem die Auswahlmöglichkeiten stehen absolut dazu positionieren.

hm.. kanns jetzt nicht probieren, aber so ca. müsste es gehen:

Code:

<div style="position:relative">

        <input value="" />

        <div style="position:absolute;top:??px;left:??px;">

              combo box

        </div>

</div>

Ebenfalls DANKE!

Ja klar, jetzt wo du's sagst . . .

Ich dachte zunaechst an eine Javascript-Loesung . . . und da habe ich leider einige Bildungsluecken aufzuweisen . . .

Also ich fasse einmal eine gut funktionierende Version zusammen:

Code:



<form action='' method='get'>



<div style='position:relative;'>

 <input id='combo1' type='text' style='width:150px' /><span onclick=\"document.getElementById('combo1_options').style.display='block'\" style='cursor:pointer'>V</span>

 <div id='combo1_options' style='display:none; width:150px; padding:5px; border:1px solid black; overflow:auto; position:absolute; top:20px; left:0px; background:#669966;'>

  <span onclick=\"document.getElementById('combo1').value='auswahl 1';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 1</span>




  <span onclick=\"document.getElementById('combo1').value='auswahl 2';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 2</span>




  <span onclick=\"document.getElementById('combo1').value='auswahl 3';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 3</span>




  <span onclick=\"document.getElementById('combo1').value='auswahl 4';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 4</span>




 </div>

</div>



</form>

lg
ff