✔ Select mit Mehrfachauswahl in einer Zeile

S

sajonara

Mitglied
Hallo ich habe folgendes Problem:
Ich habe eine selectbox (dropdown-list), in der ich eine Mehrfachauswahl treffe. Bis hier gar kein Problem. Das Problem liegt einfach daran, das ich beim Anklicken der Combobox gerne möchte, dass alle Werte angezeigt werden (also automatisch nach unten aufklappt). Ich bin aber bei "multiple" gezwungen auch den Wert von size="n" zu setzen, sonst kann ich keine Mehrfachauswahl tätigen....
Da ich auf dem Formular, wo sich die ComboBox befindet, wenig Platz habe, möchte ich im Ruhezustand nur eine Zeile angezeigt bekommen. Dann steht da z.B. "Bitte Wählen..." und trotzdem dann aufklappen und Mehrfachauswahl tätigen...

Wer kann mir helfen
 
Sven Mintel hat gesagt.:
Dann zeigs doch mal, wie problemlos es geht ;)
Zum Vergrößern anklicken....

Wie es geht, musst du schon selber rausfinden, ich kann dir aber mein JS geben, womit ich per Klick eine Textarea vergrössern/verkleinern/Reseten kann.
Wenn es mit einer Textarea geht, geht es auch mit einem Select ;)

Code: 
	<script type="text/javascript">
	<!--
		function area_resize(thisArea, m, w, h)
		{
			step_height = 20;
			step_width = 30;
			if (thisArea)
			{
				if (m == 1)
				{
					newHeight = parseInt(thisArea.style.height) + step_height;
					newWidth = parseInt(thisArea.style.width) + step_width;
				}
				else
				{
					newHeight = parseInt(thisArea.style.height) - step_height;
					newWidth = parseInt(thisArea.style.width) - step_width;
				}
				thisArea.style.height = newHeight + "px";
				thisArea.style.width = newWidth + "px";
			}
			if (document.getElementById('ta_height'))
			{
				document.getElementById('ta_height').value = newHeight;
			}
			if (document.getElementById('ta_width'))
			{
				document.getElementById('ta_width').value = newWidth;
			}
		}

		function area_reset(thisArea)
		{
			newHeight = 250;
			newWidth = 450;
			if (thisArea)
			{
				thisArea.style.height = newHeight + "px";
				thisArea.style.width = newWidth + "px";
			}
			if (document.getElementById('ta_height'))
			{
				document.getElementById('ta_height').value = newHeight;
			}
			if (document.getElementById('ta_width'))
			{
				document.getElementById('ta_width').value = newWidth;
			}
		}
	-->
	</script>

Und hiermit kannst du es einbinden (an der Stelle, wo die Links auftauchen sollen):

PHP: 
function __js_arealinks($area_id)
{
	return '<a href="javascript:onclick=(area_resize(document.form1.' . $area_id . ', 1, 5, 2));">' . __VERGROESSERN . '</a> :: <a href="javascript:onclick=(area_resize(document.form1.' . $area_id . ', 2, 5, 2));">' . __VERKLEINERN . '</a> :: <a href="javascript:onclick=(area_reset(document.form1.' . $area_id . '));">' . __RESET . '</a>';
}
 
Ist jetzt ganz primitver Code aber es funktioniert:

HTML: 
<script type="text/javascript">
function groesse (g) {

document.getElementById("liste").size = g

}
</script>

<form name="" action="" method="" enctype="text/html">
<select name="liste" id="liste" size="1" multiple="multiple" onactivate="groesse(3)" onblur="groesse(1)">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="text" name="" value="" size="20" maxlength="50" />
</form>

Die Liste hat size="1" und so bald man sie anklickt bzw. aktiviert, wird size="3". So bald der Focus von der Liste auf ein anderes Element gesetzt wird, wird automatisch wieder size="1" gesetzt.

Denke das war es was du wolltest.

Gruß Thomas
 
Zuletzt bearbeitet:
Hallo Thomas,

ich habe Deinen Script in mein Programm integriert... Leider ohne Erfolg. Das js habe ich bei mir in meine fuktionen eingefügt, die immer mit jeder Seite geladen werden...
Mein Netbeans (IDE Texteditor) warnt mich allerdings auch schon im Vorwege vor dem Befehl "onactivate" da kommt folgende Warnung: "Unknown attribute onactivate of tag <select>"

Meine Select Anweisung hier....

PHP: 
<select  name="fzg_filiale" id="fzg_filiale" size="1" multiple="multiple"  onactivate="groesse(3)" onblur="groesse(1)">
  <option value="">Filiale Wählen...</option>
  <?php                     
			$sql_Filiale = "SELECT filialen FROM config ORDER BY filialen";
			$filialen = mysql_query($sql_Filiale);
			$num_rows = mysql_num_rows($filialen);
			while ($filiale = mysql_fetch_array($filialen)) {
				if($num_rows==1)
					$fzg_filiale=$filiale['filialen'];                        
		?>
  <option value="<?echo $filiale['filialen']?>" <?php if($fzg_filiale==$filiale['filialen']){echo "selected";} ?>><?echo $filiale['filialen']?></option>
  <?	} ?>
</select>

Gruß Maurizio
 
Hallo Thomas,

ALLES OK

Ich Blödmann habe versehendlich die falsche javaScript Datei mit meinen ganzen Funktionen verwechselt!! :-(....
Ich Danke Dir ! So sieht es schon wesentlich besser aus.
Allerdings scrollt bei diesem Befehl der ganze untere Bereich natürlich um zwei Zeilen nach unten.... Schöner wäre es, wenn die CB sich einfach nur nach unten aufklappt ohne den unteren Teil runter zu drücken...

Vielleicht hat jemand auch noch so eine tolle Idee wie Thomas.
Danke an dieser Stelle auch noch an bofh1337 für seinen Tip.

Gruß
Maurizio
 
Mit Hilfe von CSS kannst du es so einrichten das die darunter platzierten Elemente nicht verschoben werden. HTML alleine reicht nicht aus wegen der Multiselect Einstellung.

HTML: 
<script type="text/javascript">
function groesse (g, m) {

document.getElementById("liste").size = g
document.getElementById("liste").multiple= m

}
</script>

<form name="" action="" method="" enctype="text/html">
<span style="position:absolute; z-index:9;">
<select name="liste" id="liste" size="1" style="width:200;" onactivate="groesse(3, 'multiple')" onblur="groesse(1, '')">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</span>
<br />
<span style="position:absolute; z-index:1;">
<input type="text" name="" value="" style="width:200;" maxlength="50" />
<p>Und hier steht jetzt noch jede Menge sinnloser Text, nur um zu zeigen
das dieser beim Aufklappen der Liste nicht verschoben wird.</p>
</span>
</form>

Gruß Thomas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück