[HTML/JS] Dynamische Auswahlliste

  • Ersteller Ersteller Mr. Snoot
  • Erstellt am Erstellt am
M

Mr. Snoot

Gast
Hio,

ich bin auf der Suche nach einem Script das bei Auswahl einer bestimmten Option in einem Dropdown-Menü ein zusätzliches Eingabefeld anzeigt. D.h. ich habe bspw. 3 Optionen in der Liste, und bei Auswahl #2 soll ein einzeiliges Textfeld angezeigt werden.

Im Grunde habe ich es schon so, wie ich es brauche - aber so wie es jetzt vorliegt ist's wohl viel zu umständlich. Darum die Frage, geht das einfacher?

Entstanden ist das Script aus einer ähnlichen Aufgabenstellung: Zeige bei Auswahl #1 und #3 ein weiteres Dropdown-Menü an, bei Option #2 dagegen ein Eingabefeld.

Ich habe jetzt alles überflüssige rausgeworfen und das Script so vergewaltigt ;) das bei Auswahl #1 und #3 kein weiteres Menü eingeblendet wird (wie man sieht, natürlich keine elegante Lösung).


Derzeitiger Stand:
HTML:
<script type="text/javascript">
<!--
function auswahl(){
}
function eingabe(i,frm){
if(i==1){
frm.sel.style.display='none';
frm.text.style.display='';
}
else{
frm.sel.style.display='none';
frm.text.style.display='none';
}
}
//-->
</script>

</head>

<body onload="eingabe(document.form.sel.selectedIndex,document.form)">

<form name="form" action="#">
<select onchange = "eingabe(this.selectedIndex,this.form); if(this.selectedIndex != 1) auswahl();">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
</select>

<br>

<select name="sel">
<option>Auswahl</option>
</select>

<input name="text">

</form>
Vermutlich kann man 90% des JS rausschmeißen, da ich die Möglichkeit, dass ein weiteres Dropdown-Menü erscheint gar nicht benötige. Bei Auswahl #1 und #3 soll also gar nichts passieren, bei #2 das Eingabefeld erscheinen.


Kann mir jemand weiterhelfen?


Ich denke, ich hab's geschafft ;)
HTML:
<script language="JavaScript" type="text/javascript">
<!--
function Auswahl() {
 if(document.form.sel.selectedIndex == 1)
{   document.form.alt.style.visibility = "visible";
}
 else {
   document.form.alt.style.visibility = "hidden";
}
}
//-->
</script>
</head><body bgcolor="FFFFFF" text="#000000">

<form name="form" action="#">
<select name="sel" onchange="Auswahl()">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
</select>

<br>
<input type="text" name="alt" value="" style="visibility:hidden">
</form>

</body>
Ich weiß nicht, aus wie vielen Script-Fragmenten ich das zusammengeschustert habe :D
 
Zuletzt bearbeitet:
Zurück
Oben