Aus ein select menu ein Text erscheinen lassen.

[lassdas]

Hallo Leute,
Ich wollte ein select Menu machen wo wenn man auf ein bestimmtes Feld klickt das dann darunter sich ein text öffnet,

<select name="Test">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
</select>

also dass wenn ich 1 auswähle das unter den Menu dann ein text mit z.B. Hallo Welt steht.
Nur leider weiß ich nicht wie das geht bzw. wie ich damit anfange.

Vielen dank.
Lassdas

 

[Tronjer]

Ich könnte mir da einen Ansatz mit mit jQuery vorstellen:

Unter #Test ein vestecktes Div erstellen:

<div id="hidden" style="display:none">Zeig mich</div>

Anschließend etwas Programmlogik hinzufügen:

$(document).ready(function() {
  if ("#Test option").attr("checked")) {
    $("#hidden").show();
  }
});

Habe das jetzt nicht getestet, aber so in etwa sollte es funktionieren.

 

[lassdas]

Wie gesagt ich habe noch nie Java Script benutz.
Ich habe das jetzt einfach hintereinander so geschrieben.

 $(document).ready(function() {  if ("#1").attr("checked")) {
    $("#hidden").show();
  }
});
<div id="hidden" style="display:none">Test</div>

Und wie man schon denken kann geht das nicht ...
Könnte einer eine Anleitung machen für die die das noch nie benutz haben?
Und wie activire ich jQuery?

PS:Ich habe XAMMP.

 

[Tronjer]

jQuery kannst du entweder downloaden und lokal einbinden - oder auch direkt über die Google Api. Nähere Infos dazu findest du hier:

jQuery: The Write Less, Do More, JavaScript Library

Der jQuery Code muss dann natürlich in einem <script> Tag stehen.

btw. mit XAMPP hat das nichts zu tun. JavaScript wird immer clientseitig ausgeführt.

 

[lassdas]

Meinst du so?

<script src="jquery-1.7.2.min.js"type="text/javascript">
$(document).ready(function() {
  if ("#Test option").attr("checked")) {
    $("#hidden").show();
  }
});
</script>

[[LEFT][COLOR=#3E3E3E]/CODE][/COLOR][/LEFT]

 

[lassdas]

Wenn ja wie wähle ich die Option aus wo der text kommen soll?

 

[Tronjer]

Die jQuery library verlinkst du im Head, und deinen eigenen Code schreibst du ohne source Tag in den Head oder Body.

<script type="text/javascript">
  $(document).ready(function() {
    // hier die Funktionen
  });
<script>

Schau dir aber erst mal das Tutorial auf jquery.com an. Das macht die Sache verständlicher.

 

[Tronjer]

Wenn ja wie wähle ich die Option aus wo der text kommen soll?

In meinem Beispiel hatte ich einen DIV Container geschrieben, der beim Laden der Seite bereits existiert, aber noch nicht angezeigt wird. Den kannst du mittels CSS überall plazieren.

 

[lassdas]

woher weiß er das das er genau den DIV Container öffne soll und nicht alle anderen?

 

[Tronjer]

Über die ID.

<div id="mydiv" style="display:none;">Ein Text</div>

korresponiert mit

$('#mydiv').show();

und entfernt das display:none;

Auf jquery.com gibt es ein Tutorial. Damit wird das Ganze verständlicher.