Auswahlmenü mit Switch Case kombinieren?

Superwayne

Hallo erstmal,
Ich habe schon viel dazu gegoogelt, aber bisher noch nichts dazu gefunden.
Ich will/soll für eine Homepage einen Markenfinder einbauen. Nun wollte ich das mit einen drop-down Auswahlmenü machen und dann per switch-case anzeigen lassen, in welchen Läden es die Marke gibt.
Das Drop-down Menü habe ich:
[INDENT]<select id="Marken" size="1" name="Marken" onchange="ModeAusgabe()">
[/INDENT]
[INDENT]<option selected="selected">---</option>
[/INDENT]
[INDENT]<option value="Marke 1">Marke 1</option>
<option value="Marke 2">Marke 2</option>
<option value="usw.">usw.</option>
[/INDENT]
[INDENT]</select>
[/INDENT]

Nun weiß ich aber nicht, wie ich das mache, dass je nach ausgewählter Marke ein Text unter dem Menü angezeigt wird (also ohne, dass eine neue Seite geladen wird). Den Text will ich dann für jede Marke selber definieren.

Ich hoffe es ist verständlich, was ich meine. Arbeite noch nicht so lange mit html...

Muss auch nicht mit switch-case sein, aber ich glaube, dass das damit am besten geht, oder?

Hoffe mir kann da jemand helfen.

MfG Superwayne

Bandit

Z.B.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title></title>
 <meta name="author" content="User">
 <meta name="editor" content="html-editor phase 5">
 <style type="text/css">
  .hiddenContent {
    width: 100px;
    height: 100px;
    border: 1px solid green; 
    display: none;
 }
 </style>
 <script type="text/javascript">
 
  var visibleID = "";

  function showHide() 
  {
    if (document.getElementById('Marken')) 
    {
       if (visibleID != '')  
          document.getElementById(visibleID).style.display = 'none';

       visibleID = document.getElementById('Marken').value;

       if (visibleID != '')
         document.getElementById(visibleID).style.display = 'block';
    }
 }
 </script>
 </head>
 <body>
 <select id="Marken" size="1" name="Marken" onchange="showHide()">
  <option value="" selected="selected">---</option>
  <option value="m1">Marke 1</option>
  <option value="m2">Marke 2</option>
</select>
 <div id="m1" class="hiddenContent">
   <p>ID="m1"</p>
 </div>
 <div id="m2" class="hiddenContent">
  <p>ID="m2"</p>
 </div>
 </body>
 </html>

Alles anzeigen

Superwayne

Hey, vielen dank erstmal für die schnelle Antwort.
Also die <head> Zeile wird auf unserer HP nicht benutzt, ich gehe davon aus, dass diese für die gesamte Webseite vordefiniert ist. Das <style> element und das java script habe ich also mit in das genommen, was eigentlich der <body> Bereich ist.
Nun kenne ich mich leider mit css nur sehr wenig und mit java scripten gar nicht aus.
Wenn ich den Code jedoch so verwende, reagiert die Seite nicht darauf, wenn ich etwas auswähle.

Code

<div id="m1" class="hiddenContent">
   <p>ID="m1"</p>

Das ist doch die Zeile, die angezeigt werden sollte, wenn Marke 1 gewählt wird oder nicht?

mfg Superwayne

Edit:
Einen Moment, ich glaube ich habe das Problem gefunden..
Die Homepage wird mit Wordpress verwaltet und ich wusste nicht, dass WP keine Java Scripte auf content Seiten zulässt..
Ich muss erstmal schauen, wie ich das java script zum funktionieren kriege..
Nur seltsam, dass, wenn ich das Java script aus dem Code genommen habe, die ID="m1" und "m2" so angezeigt wurden, statt versteckt waren, obwohl das java script ja nichts machen dürfte..

Bandit

Ich vermute mal, du hast irgend etwas falsch gemacht. Kopiere den Kram auf einen Server und poste einen Link zur Seite

<edit>

Zitat von Superwayne

Nur seltsam, dass, wenn ich das Java script aus dem Code genommen habe, die ID="m1" und "m2" so angezeigt wurden, statt versteckt waren, obwohl das java script ja nichts machen dürfte..

Dann fehlt die Style-Angabe für "hiddenContent"
</edit>

Superwayne

http://www.kiki-kindermode.de/?page_id=4976
Das ist die Seite dafür..

Mal nebenbei:
Da es über 100 Marken sind, wollte ich mal fragen, ob die Methode, die du mir gezeigt hast, dafür effektiv ist, oder ob man das einfacher gestalten kann.

Bandit

Wenn man deinem Link aufruft, kommt:

Zitat

We're sorry, but that page doesn't exist or has been moved.

- - - Aktualisiert - - -

Zitat von Superwayne

Nun kenne ich mich leider mit css nur sehr wenig und mit java scripten gar nicht aus.

Mir stellt sich die Frage, wieso du mit solchen Vorraussetzungen überhaupt an einer kommerziellen Seite rumbastelst.

Superwayne

Sry, hatte die Seite noch nicht veröffentlicht, die war bisher nur Admins zugänglich. Jetzt sollte es gehen.
Ich habe jetzt wie auf http://codex.wordpress.org/Using_Javascript beschrieben ein .js file mit folgendem Code in die WP Mediathek hochgeladen:

Code

var visibleID = "";

function showHide() 
  {
    if (document.getElementById('Marken')) 
    {
       if (visibleID != '')  
          document.getElementById(visibleID).style.display = 'none';

       visibleID = document.getElementById('Marken').value;

       if (visibleID != '')
         document.getElementById(visibleID).style.display = 'block';
    }
 }

Alles anzeigen

Und dann ein "<script type="text/javascript" src="http://www.kiki-kindermode.de/wp-content/upl…12/08/marken.js"></script>" vor dein javascript gesetzt, weil auf der Seite steht, dass das nötig wäre um bei WP ein javascript einzubinden.
Jedoch funktioniert es immer noch nicht.

Ich arbeite als Nebenjob bei der Seite, um den eigentlichen Programmierer zu entlasten. Die meiste Arbeit besteht lediglich daraus, Neuigkeiten zu veröffentlichen usw.
Jetzt sollte ich jedoch den alten Markenfinder, der nicht mehr funktionierte, erneuern..

mfg

Bandit

Zitat von Superwayne

Ich arbeite als Nebenjob bei der Seite, um den eigentlichen Programmierer zu entlasten.

Wenn du mehr kaputt machst, als alles andere, bringt das doch nichts.

Benutze mal den Firefox mit installiertem AddOn "Webdeveloper" Der zeigt dir dann diesen und einige andere Fehler an.

Und einen Validator drüberlaufen zu lassen, ist auch keine dumme Idee: http://validator.w3.org/check?verbose=…Fpage_id%3D4976

http://validator.w3.org/check?verbose=…Fpage_id%3D4976

Superwayne

Jetzt bin ich nur noch verwirrter muss ich zugeben..
Die Seite sagt, das style element sei im body nicht erlaubt, wenn ich es jedoch entferne, dann ist das ID="m1" und "m2" nicht länger versteckt?
Dann zeigt es Codestellen wie z.B. <script type="text/javascript"></p> an, die es in dem Code jedoch gar nicht gibt?
Also ich werde gerade nicht wirklich schlau.. Weder aus dem Validator, noch aus dem AddOn..
Sry, dass ich so unfähig bin

Wo nichts ist, kann ich ja auch nichts kaputt machen
Das Angebot von denen war, dass man guckt, wo ich helfen kann und ich solche Sachen lerne, wenn ich bei denen arbeite. Nun habe ich halt mal etwas schwierigeres erwischt und wenn ich das dann mal hinbekommen sollte, weiß ich fürs nächste mal bescheid. Also learning by doing sozusagen

Edit:
Ich weiß nicht so recht warum, aber scheinbar ergänzt WP noch ewig viele <p> und </p> in den Code.. Kann das die Fehlerursache sein?
Oder was genau ist das Problem?

Bandit

Der Browser bekommt, wenn man sich mal den HTML-Code ansieht, dies:

Code

<p><script type="text/javascript"></p>
<p>  function showHide() 
  {
    if (document.getElementById('Marken')) 
    {
       if (visibleID != '')  
          document.getElementById(visibleID).style.display = 'none';</p>
<p>       visibleID = document.getElementById('Marken').value;</p>
<p>       if (visibleID != '')
         document.getElementById(visibleID).style.display = 'block';
    }
 }
 </script></p>

Alles anzeigen

Ich glaube, da muss man nicht lange drüber nachdenken, dass das völlig in die Hose gegangen ist, was du da gemacht hast.

- - - Aktualisiert - - -

Zitat von Superwayne

Ich weiß nicht so recht warum, aber scheinbar ergänzt WP noch ewig viele <p> und </p> in den Code.. Kann das die Fehlerursache sein?
Oder was genau ist das Problem?

2 Probleme

Du kannst nicht einfach irgendwelchen CSS/JavaScript-Code im Admin-Bereich einbauen, sondern musst Anpassungen im Template durchführen
Du hast zu wenig Ahnung von HTML/CSS/JavaScript und vom Adminbereich in WP

Superwayne

Ich weiß, dass ich zu wenig Ahnung habe um den Markenfinder zu erstellen und deswegen bitte ich hier um Hilfe :-/
mein Aufgabenbereich war bisher viel einfacher...
magst du mir sagen, was ich machen muss?
das wäre echt toll.

synaptic

also ich hab bisher nur den thread überflogen und die ersten beiden dinge die mir ao aufgefallen sind:
style kann auch wie die js ausgelagert werden und im <head>-tag verankert
und javascript gehört entweder in eine eigene file oder zusammenhängend als ein <script>-tag aber nich so ausgedröselt in <p>-tags

Bandit

Zitat von Superwayne

magst du mir sagen, was ich machen muss?

Da ich mich mit Wordpress bisher noch nicht ernsthaft beschäftigt habe, kann ich dir da leider nicht weiterhelfen. Füttere google mal mit

Zitat

wordpress theme anpassen

da solltest du was finden.

Superwayne

Zitat von synaptic

und javascript gehört entweder in eine eigene file oder zusammenhängend als ein <script>-tag aber nich so ausgedröselt in <p>-tags

Ja, dass macht der Wordpress Editor von alleine und ich kriege nicht raus, wie ich das abstelle :-/

Okay, jetzt habe ich auch das ganze mit dem Wordpress kapiert, danke

Nun habe ich von meiner Chefin vorhin gesagt bekommen, dass die angebotenen Marken ständig wechseln und ich hatte die Idee, dass es ja im nachhinein einfacher zu bearbeiten wäre, wenn man nicht jede Marke einzeln anlegt und die dazugehörenden Geschäfte angibt, sondern stattdessen eine Datei (oder auch für jedes Geschäft eine einzelne) anlegt und dort die Marken einträgt und den Markenfinder dann alle Geschäfte dursuchen lässt und dann die anzeigt, die die Gesuchte Marke enthalten. Also quasi eine lokale Suchfunktion(?)
ist so etwas umsetzbar und wenn ja, nach welchem Stichwort sollte ich da googeln?

Mfg

Bandit

Das mit Dateien zu veranstalten würde ich für groben Unfug halten. Soetwas regelt man mit einer Datenbank.

Auswahlmenü mit Switch Case kombinieren?

Tags

Benutzer online in diesem Thema