| Autor |
Nachricht |
Zim
Threadersteller
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: 
|
Verfasst Mi 12.01.2011 18:50
Titel JavaScript select/option switch ohne reload |
  |
|
Hi,
seid so nett und helft mal kurz einem Javascript Legastheniker 
| Code: |
<select id="my_selections" >
<option value="get_selection" >bitte auswählen</option>
<option value="wert1">wert 1</option>
<option value="wert2">wert 2</option>
<div style="display:none;" id="div1" >inhalt</div>
<div style="display:none;" id="div2" >anderer inhalt</div>
|
Folgendes soll passieren:
wenn man optionsfeld 1 auswählt soll das div mit der ID »div1« eingeblendet werden beim 2. entsprechend das 2. div.
Ändert man die auswahl dann erscheint wieder das entsprechend andere div und das aktuelle verschwindet. Geht man nun wieder aud die option mit der value »get_selection« dann werden beiden divs wieder auf display:none gesetzt.
das ganze sollte allein über javascript laufen, kein ajax (der inhalt der divs ist gering und wird beim seitenaufruf komplett geladen) – es darf auch kein submit ausgelöst werden
Danke schon mal für eure Hilfe 
|
|
| |
  |
 |
bacon
Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 12.01.2011 18:58
Titel
|
|
|
|
Wenn du's ordentlich & generisch halten möchtest, musst Du das programmieren... in Javascript. Das kann man in 3 Zeilen nicht unbedingt direkt erklären. Vielleicht solltest Du Dir sprachunabhängig Gedanken über die generelle Vorgehensweise machen und das mal kurz aufzeichnen?
|
|
| |
|
|
|
Anzeige
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 12.01.2011 20:01
Titel
|
|
|
zb könntest du es so machen:
http://jsfiddle.net/pmhcD/
| Code: | <select id="switch">
<option>please select</option>
<option>Div 1</option>
<option>Div 2</option>
<option>Div 3</option>
</select>
<div id="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
|
| Code: | // cache
var $container = $("#container");
var $switch = $("#switch");
// hide all
$("div",$container).hide();
// button action "select field"
$switch.change(function() {
// index of switched option
var theIndex = $switch.attr("selectedIndex");
toggleContent(theIndex);
});
function toggleContent(theIndex) {
$("div",$container).hide();
$("div:nth-child("+theIndex+")").show();
}
|
das ist jetzt natürlich nur schnell hingetippt. ein paar überprüfungen hier und da, evtl das "bitte auswählen" speziell mit einem value versehen usw... aber so im prinzip läufts
|
|
| |
 |
|
Zim
Threadersteller
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Do 13.01.2011 01:35
Titel
|
|
|
Das funktioniert 
vielen Dank
(auch wenn ich zu meiner Schande gestehen muss das ich absolut keine Ahnung habe warum das funktioniert so ganz ohne id´s in den options und den divs)
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 13.01.2011 10:42
Titel
|
|
|
für den lerneffekt:
| Code: | // cache
var $container = $("#container"); // das element mit der ID container in einer variable speichern
var $switch = $("#switch"); // das element mit der id switch in einer variable speichern
// hide all
$("div",$container).hide(); // alle divs innerhalb von #container verstecken
// button action "select field"
$switch.change(function() { // beim change event (also dem umschalten) der selectbox folgendes tun:
// index of switched option
var theIndex = $switch.attr("selectedIndex"); // den index der selektierten option (also ist nummer 1,2 oder 3 selektiert) herausfinden
toggleContent(theIndex); // den index der option an die funktion toggleContent übergeben.
});
function toggleContent(theIndex) {
$("div",$container).hide(); // alle divs innerhalb von #container verstecken (falls vorher welche eingeblendet wurden)
$("div:nth-child("+theIndex+")",$container).show(); // das n-te div innerhalb von container einblenden. dabei wird als "n" die zahl genommen, die beim umschalten der selectbox an diese funktion übergeben wurde. wenn ich also option 3 auswähle, wird das dritte div im container eingeblendet.
} |
|
|
| |
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Do 13.01.2011 10:42
Titel
|
|
|
oha, dann sollten wir das allerdings noch klären!
c 'n' p wollen wir ja nich
was genau ist dir denn nicht klar?
// danke sahnemuh 
Zuletzt bearbeitet von choise am Do 13.01.2011 10:43, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Zim
Threadersteller
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Do 13.01.2011 16:28
Titel
|
|
|
ok danke, nun sehe ich klarer
JavaScript ist für mich echt die Hölle. Dagegen kann ich c++ schon richtig gut
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
select-box option aktiviert select-box
HTML: <select> voreingestelltes <option> tag ?
Select Form mit individuellen Mails pro Option
Reihenfolge der Option-Werte in einer Select-Liste ändern
[javascript] mit <select> feld wert an javascript funk
Reload von DIV-Inhalt mit JavaScript?
|
|
Willkommen auf dem Portal für Mediengestalter
