✔ DropDown und "neuen Artikel"

M

maga147

Erfahrenes Mitglied
Hallo,

ich hab eine DropDown Liste mit X verschiedenen Artikeln.
Leider kann es vorkommen, dass ein bestimmter Artikel nicht in dieser Liste ist. Dann bräuchte ich also ein Eingabeformular um einen neuen Artikel anzulegen.

Ich hab mir das ganze so vorgestellt, dass ganz unten in der Liste "Neuer Artikel" steht, und wenn ich das auswähle, soll unter der Liste ein Input Kasten kommen. Leider fehlt's mir hier im Lösungsansatz. Geht das irgendwie ohne Reload? also Idealerweise so wie bei http://www.web.de oben das Auswählen von Suche und Freemail?

Danke
 
Rein vom Prinzip her: Du machst das Input-Feld unsichtbar (style="display:none;"). In das Dropdown kommt ein onchange. Der onchange ruft eine Funktion auf, die Prüft, welches Element ausgewählt ist. Ist es ein anderes wird der style.display weiterhin auf "none" gesetzt, ist es aber das spezielle Auswahlfeld, wird der auf block gesetzt und das Feld so sichtbar gemacht. So einfach ist das.
 
Zuletzt bearbeitet:
hmmmm also klingt logisch :) bloß die function macht mir etwas sorgen. Hast du da ggf. paar Functionen und Tutorials weil ich kann so gut wie kein JavaScript....

Danke
 
Wenn du ein wenig Ahnung von Programmierung hast sollte es trotzdem kein Prolem sein. Gib dem input-Feld und dem Dropdown jeweils eine id. Dann kannst du sie über document.getElementById() ansprechen. Bei der Dropdown-Box bekommst du mit selectedIndex die Nummer des Elements, das gerade ausgewählt ist. Ist die gleich der Nummer des Elements, das das input einblenden soll wird dessen display per style.setAttribut() auf "block" gesetzt, ansonsten auf "none" (if-else-Abfrage).

Lies einfach die Links aufmerksam durch und probier ein bisschen rum. Hoffe du verstehst, dass ich dir kein vollständig funktionierendes Beispiel schreiben will, denn so würde ich ja deine Arbeit machen...
Sven Mintel hat gesagt.:
Sinn dieses Boards ist es nicht, dass User mit Ahnung von einer bestimmten Sprache für User ohne Ahnung eine Wunschliste abarbeiten.
Ebensowenig ist es Sinn des Boards, das Basiswissen einer bestimmten Sprache zu vermitteln.
Dafür gibt es mannigfaltige Adressen im Web, die sich dies zur Aufgabe gemacht haben und sehr gut tun.
Zum Vergrößern anklicken....
 
*sorry, doppelpost*

Aber ich bekomm's irgendwie nicht hin.

Javascript: 
<head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
  if (document.Testform.Auswahl.selectedIndex == 2)

	document.all.Testform.newname.setAttribute("display", "block", false);
}
</script>
</head>

<body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()" id="1">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>

<input name="newname" id="newname" style="display:none;" />

Aber irgendwie tut sich da nix...... Die Funktion wird ausgeführt wenn ich "Guildo Horn" klicke. Das hab ich mit ner einfachen Text ausgabe ausprobiert. Aber der Style wird nicht geändert.
 
Zuletzt bearbeitet von einem Moderator:
So funktioniert es:

HTML: 
<html>
 <head>
  <title>Test</title>

  <script type="text/javascript">
   function CheckAuswahl () {
            if (document.Testform.Auswahl.selectedIndex == 5)
                document.getElementById("newname").style.visibility = "visible";
   }
  </script>
 </head>

 <body>
  <form name="Testform" action="">
   <select name="Auswahl" size="6" onchange="CheckAuswahl()">
    <option>Goethe</option>
    <option>Schiller</option>
    <option>Guildo Horn</option>
    <option>Homer</option>
    <option>Fontane</option>
    <option>Neuer Artikel</option>
   </select>
   <input name="newname" id="newname" style="visibility:hidden;" />
  </form>
 </body>
</html>

Es ist so, dass wenn du auf 'Neuer Artikel' klickst das inputfeld 'newname' angezeigt wird.
 
Dein Script hat wahrscheinlich deswegen nicht funktioniert, weil document.all nur vom Internet Exploiter unterstüzt wird. Ich würde die else-Bedingung übrigends noch einbauen, damit das Feld ausgeblendet wird, sobald das Element nicht mehr selektiert ist.
HTML: 
<html>
  <head>
   <title>Test</title>
 
   <script type="text/javascript">
    function CheckAuswahl () {
            document.getElementById("newname").style.display = (document.Testform.Auswahl.selectedIndex == 5) ? "block" : "none";
    }
   </script>
  </head>
 
  <body>
   <form name="Testform" action="">
    <select name="Auswahl" size="6" onchange="CheckAuswahl()">
     <option>Goethe</option>
     <option>Schiller</option>
     <option>Guildo Horn</option>
     <option>Homer</option>
     <option>Fontane</option>
     <option>Neuer Artikel</option>
    </select>
    <input name="newname" id="newname" style="display:none;" />
   </form>
  </body>
 </html>
 
jo Danke, so klappt es besser. Aber eine Frage noch. Wie kann ich die Funktion so umgestalten, dass immer das Letzte "option" einer Liste verwendet wird? Bzw. per ID oder Name fest zuweisen, welches Option gewählt werden muss?

Danke!
maga147
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück