Drop-Down-Menü: Seite dynamisch schreiben
Fabian Steiner
- javascript
0 Hubert0 Fabian Steiner0 amel
Hi!
Ich habe auf meiner Homepage ein kleines Dropdownmenü angebracht. Nun möchte ich, dass ein Besucher einen Punkt aus diesem auswählen und einen Button drücken kann, woraufhin unter diesen <form>-Feld eine Tabelle dynamisch geschrieben wird. Das Problem ist, dass es bei mir schon an der Ausgabe des values scheitert:
Hier das drop-down-Menü:
<form name="form">
<select name="select" size="1">
<option value="Auswahl:">Auswahl:</option>
<option value="Softstarter">---SOFTSTARTER---</option>
<option value="ESG">ESG</option>
<option value="ESG-I">ESG-I</option>
<input type="button" name="button" onclick="schreibe()" />
Mein javascript Versuch:
function schreibe(){
var auswahl = document.form.select.option.value;
if(auswahl == "ESG"){
writeln('<p><a href="esg.doc">ESG</a></p>')
}
Jetzt hab ich mal versucht einfach das Value auszugeben, also alert(auswahl); aber auch das funzte schon nicht! Was mache ich denn falsch?
Nabend,
Ich habe auf meiner Homepage ein kleines Dropdownmenü angebracht.
Natürlich hast du auch an eine JS-freie Version gedacht.
Jetzt hab ich mal versucht einfach das Value auszugeben, also alert(auswahl); aber auch das funzte schon nicht!
Ein Browser würde dir dabei eine schöne Fehlermeldung ausgeben. Tat deiner das nicht?
Und http://selfhtml.teamone.de/javascript/objekte/elements.htm#value hast du auch gelesen? Du möchtest doch die value des Select-Feldes haben, nicht von dem options-Array oder einem seiner Elemente.
Bis denne,
Nabend,
So, ist bei dir jetzt schon Abend ?
Ich habe auf meiner Homepage ein kleines Dropdownmenü angebracht.
Natürlich hast du auch an eine JS-freie Version gedacht.
Natürlich hab ich das!
Jetzt hab ich mal versucht einfach das Value auszugeben, also alert(auswahl); aber auch das funzte schon nicht!
Ein Browser würde dir dabei eine schöne Fehlermeldung ausgeben. Tat deiner das nicht?
Und http://selfhtml.teamone.de/javascript/objekte/elements.htm#value hast du auch gelesen? Du möchtest doch die value des Select-Feldes haben, nicht von dem options-Array oder einem seiner Elemente.Bis denne,
Doch, ich möchte den/das(?) value der einzelnen option elemente kriegen, um dann wenn z.B. value = esg ist, unter dem form-Feld eine Tabelle schreiben zu lassen. BTW, den Link oben hab' ich schon vor dem Posten angeschaut und auch habe ich bei google geschaut aber nicht mein Problem bereits gelöst gefunden.
hallo!
Probier mal hiermit! Es gibt hier die Tabelle auf Knopfdruck aus und mit vorher eingegebenen Werten aber du kannst das sicher so umschreiben dass wenn du ein Select machst er die dazu passenden Werte nimmt und in dieser Tabelle ausgibt. Das ist sicherilich nicht schwierig! Probiers aus! Gruß!
<html> <head> <title>dynamische Tabelle</title> <script language="JavaScript"> function tableDraw() {this.span();
var props = ""; var i = 0; var dummyRows = this.content.length; var dummyCols = this.content[0].length;
var dummyCode = '<table'; for (prop in this) {if (i >= this.propsLengthPublic) {break;} dummyCode = dummyCode+' '+prop+'="'+this[prop]+'"';i++; } dummyCode = dummyCode+'>\n';
for (var i=1;i<=dummyRows;i++) {dummyCode = dummyCode+'<tr>\n'; for (var k=1;k<=dummyCols;k++) {if (this.content[(i-1)][(k-1)][2] == "false") {dummyCode = dummyCode+' <td
'+this.content[(i-1)][(k-1)][0]+'>'+this.content[(i-1)][(k-1)][1]+'</td>\n';} } dummyCode = dummyCode+'</tr>\n'; }
dummyCode = dummyCode+'</table>\n'; return dummyCode; }
function tableSpan() {var dummyRows = this.content.length; var dummyCols = this.content[0].length;
for (var i=1;i<=dummyRows;i++) {var rowspan = 0;var colspan = 0; var fromHere = 0;var tillThere = 0; var myString = ""; for (var k=1;k<=dummyCols;k++) {rowspan = 0;colspan = 0; if (this.content[(i-1)][(k-1)][2] == "false") {myString = (this.content[(i-1)][(k-1)][0]) + ""; if (myString.indexOf("colspan") >= 0) {fromHere = (myString.indexOf("colspan"))+9; tillThere = (myString.indexOf('"',fromHere))-1; if ((fromHere-tillThere) == 0) {colspan = myString.charAt(fromHere);} else {colspan = myString.substring(fromHere,tillThere);} colspan = parseInt(colspan); } if (myString.indexOf("rowspan") >= 0) {fromHere = (myString.indexOf("rowspan"))+9; tillThere = (myString.indexOf('"',fromHere))-1; if ((fromHere-tillThere) == 0) {rowspan = myString.charAt(fromHere);} else {rowspan = myString.substring(fromHere,tillThere);} rowspan = parseInt(rowspan); } if ((colspan >= 2) && (rowspan <= 1)) {for (var m=2;m<=colspan;m++) {this.content[(i-1)][((k-1)+(m-1))][2] = "true";} } if ((rowspan >= 2) && (colspan <= 1)) {for (var m=2;m<=rowspan;m++) {this.content[((i-1)+(m-1))][(k-1)][2] = "true";} } if ((rowspan >= 2) && (colspan >= 2)) {for (var m=1;m<=rowspan;m++) {for (var p=1;p<=colspan;p++) {this.content[((i-1)+(m-1))][((k-1)+(p-1))][2]
= "true";} } this.content[(i-1)][(k-1)][2] = "false"; } } } } }
function tableContent(dummyCols,dummyRows) {var dummyContent = "["; for (var i=1;i<=dummyRows;i++) {dummyContent = dummyContent+"[" for (var k=1;k<=dummyCols;k++) {dummyContent = dummyContent+"[['align="+'"left"'+" valign="+'"top"'+"'],['
'],['false']],";} dummyContent = dummyContent.substring(0,((dummyContent.length)-1)); dummyContent = dummyContent+"]," } dummyContent = dummyContent.substring(0,((dummyContent.length)-1)); dummyContent = dummyContent+"]"; return eval(dummyContent); }
function tableContentArraysToArguments() {var dummyRows = this.content.length; var dummyCols = this.content[0].length; for (var i=1;i<=dummyRows;i++) {for (var k=1;k<=dummyCols;k++) {this.content[(i-1)][(k-1)].props = this.content[(i-1)][(k-1)][0]; this.content[(i-1)][(k-1)].value = this.content[(i-1)][(k-1)][1]; this.content[(i-1)][(k-1)].spans = this.content[(i-1)][(k-1)][2]; } } }
function tableContentArgumentsToArrays() {var dummyRows = this.content.length; var dummyCols = this.content[0].length; for (var i=1;i<=dummyRows;i++) {for (var k=1;k<=dummyCols;k++) {this.content[(i-1)][(k-1)][0] = this.content[(i-1)][(k-1)].props; this.content[(i-1)][(k-1)][1] = this.content[(i-1)][(k-1)].value; this.content[(i-1)][(k-1)][2] = this.content[(i-1)][(k-1)].spans; } } }
function table() {var propsDefaultLength = 2; this.cols = 1; this.rows = 1; for (var i=1;i<=table.arguments.length;i++) {if (table.arguments[(i-1)].indexOf("cols") >= 0) {propsDefaultLength--;} if (table.arguments[(i-1)].indexOf("rows") >= 0) {propsDefaultLength--;} eval("this."+table.arguments[(i-1)]); } this.propsLengthPublic = (table.arguments.length + propsDefaultLength); this.propsLengthPrivat = 7; this.content = tableContent(this.cols,this.rows); this.span = tableSpan; this.draw = tableDraw; this.contentArraysToArguments = tableContentArraysToArguments; this.contentArgumentsToArrays = tableContentArgumentsToArrays; } </script> </head> <body> <form name="form2"> <input name="zeile" type="text" size="3" value="";> Zeilen <input name="sp" type="text" size="3" value="";> Spalten </form> <form name="Reihe1"> <input name="value1" type="text" size="5" value=""> <input name="value2" type="text" size="5" value=""> <input name="value3" type="text" size="5" value=""> Inhalt in der Tabelle! </form> <form name="Reihe2"> <input name="value4" type="text" size="5" value=""> <input name="value5" type="text" size="5" value=""> <input name="value6" type="text" size="5" value=""> Inhalt in der Tabelle! </form> <script language="JavaScript"> window.document.form2.sp.value="3"; window.document.form2.zeile.value="3"; </script> <form> <input type=button value="zeichne tabelle" onClick="schreibe()"> </form> <script language="JavaScript"> function schreibe() { var tabelle2=new
table('cols='+'window.document.form2.sp.value','rows='+'window.document.form2.zeile.value','border="1"'
,'bgcolor="#FFFFCC"'); tabelle2.contentArraysToArguments(); tabelle2.content[0][0].value = window.document.Reihe1.value1.value; tabelle2.content[0][1].value = window.document.Reihe1.value2.value; tabelle2.content[0][2].value = window.document.Reihe1.value3.value; tabelle2.content[1][0].value = window.document.Reihe2.value4.value; tabelle2.content[1][1].value = window.document.Reihe2.value5.value; tabelle2.content[1][2].value = window.document.Reihe2.value6.value; tabelle2.content[0][0].props = 'align="center"'; tabelle2.content[0][1].props = 'align="center"'; tabelle2.content[0][2].props = 'align="center"'; tabelle2.content[1][0].props = 'align="center"'; tabelle2.content[1][1].props = 'align="center"'; tabelle2.content[1][2].props = 'align="center"'; tabelle2.contentArgumentsToArrays(); document.write(tabelle2.draw()); } </script> </body> </html>