Versandkosten Kalkulator

Yendor · 08. Apr. 2016

Hallo beisammen,

ich scheitere daran, ein Script so zu ändern, dass es dem Benutzer Versandkosten anzeigt.

Im Grunde habe ich keine Ahnung von JS. Zugegeben, im Nachinein war es naiv zu glauben, dass man ein "select" in ein "display" ändern kann und alles funktioniert.

Offenbar braucht es deutlich mehr Fähigkeiten, die ich nicht habe. Könnte mir bitte jemand bei folgendem Script helfen?

Es handelt sich um eine dynamische Übergabe der vorherigen Auswahlen.

In der 4. Ebene hätte ich dann aber eben gern keine Auswahl mehr, sondern eine eindeutige Anzeige. In dem Fall der Preis.

Ich würde mich tierischst freuen, wenn hier jemand die Zeit aufwenden könnte, mir dieses Script zu vervollständigen.

herzlichen Dank

Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("Haargummis", "$");
	data_2 = new Option("Haarbürsten", "$$");
	data_3 = new Option("Haarreifen", "$$$");
	data_4 = new Option("Zopfbänder", "$$$$");
	data_5 = new Option("Ponytails", "$$$$$");
	

	
// second combo box

	data_1_1 = new Option("Unter 50 Stk", "-");
	data_1_2 = new Option("Über 50 Stk", "-");
	
	data_2_1 = new Option("bis 60cm Breite", "--");
	data_2_2 = new Option("bis 100cm Breite", "--");
	data_2_3 = new Option("über 100cm Breite", "--");
	
	data_3_1 = new Option("Bis 60cm Breite", "---");
	data_3_2 = new Option("Bis 100cm Breite", "---");
	data_3_3 = new Option("Bis 150cm Breite", "---");
	data_3_4 = new Option("Über 150cm Breite", "---");

	data_4_1 = new Option("Bis 60cm Breite", "----");
	data_4_2 = new Option("Bis 100cm Breite", "----");
	data_4_3 = new Option("Bis 150cm Breite", "----");
	data_4_4 = new Option("Über 150cm Breite", "----");
	
	data_5_1 = new Option("1 Stk", "-----");
	data_5_2 = new Option("2 Stk", "-----");
	data_5_3 = new Option("3 Stk", "-----");
	data_5_4 = new Option("4 Stk", "-----");
	

	
// third combo box

	data_1_1_1 = new Option("Versand per DHL", "*");
	data_1_1_2 = new Option("Versand per EuroCourier", "*");
	data_1_2_1 = new Option("Versand per DHL", "*");
	data_1_2_2 = new Option("Versand per EuroCourier", "*");
	
	data_2_1_1 = new Option("Versand per DHL", "*");
	data_2_1_2 = new Option("Versand per EuroCourier", "**");
	data_2_2_1 = new Option("Versand per DHL", "*");
	data_2_2_2 = new Option("Versand per EuroCourier", "**");
	data_2_3_1 = new Option("Versand per DHL", "**");
	data_2_3_2 = new Option("Versand per EuroCourier", "**");
	
	data_3_1_1 = new Option("Versand per DHL", "**");
	data_3_1_2 = new Option("Versand per EuroCourier", "***");
	data_3_2_1 = new Option("Versand per DHL", "***");
	data_3_2_2 = new Option("Versand per EuroCourier", "***");
	data_3_3_1 = new Option("Versand per DHL", "***");
	data_3_3_2 = new Option("Versand per EuroCourier", "***");
	data_3_4_1 = new Option("Versand per DHL", "**");
	data_3_4_2 = new Option("Versand per EuroCourier", "***");

	data_4_1_1 = new Option("Versand per DHL", "**");
	data_4_1_2 = new Option("Versand per EuroCourier", "****");
	data_4_2_1 = new Option("Versand per DHL", "***");
	data_4_2_2 = new Option("Versand per EuroCourier", "****");
	data_4_3_1 = new Option("Versand per DHL", "***");
	data_4_3_2 = new Option("Versand per EuroCourier", "****");
	data_4_4_1 = new Option("Versand per DHL", "**");
	data_4_4_2 = new Option("Versand per EuroCourier", "****");
	
	data_5_1_1 = new Option("Versand per DHL", "**");
	data_5_1_2 = new Option("Versand per EuroCourier", "*****");
	data_5_2_1 = new Option("Versand per DHL", "***");
	data_5_2_2 = new Option("Versand per EuroCourier", "*****");
	data_5_3_1 = new Option("Versand per DHL", "***");
	data_5_3_2 = new Option("Versand per EuroCourier", "*****");
	data_5_4_1 = new Option("Versand per DHL", "**");
	data_5_4_2 = new Option("Versand per EuroCourier", "*****");

// fourth combo box

	data_1_1_1_1 = new Option("6,60€","%")
	data_1_1_2_1 = new Option("19,90€","%%")
	data_1_2_1_1 = new Option("Versandkostenfrei","%")
	data_1_2_2_1 = new Option("19,90€","%%")
	
	data_2_1_1_1 = new Option("6,60€","%")
	data_2_1_2_1 = new Option("6,60€","%%")
	data_2_2_1_1 = new Option("6,60€","%")
	data_2_2_2_1 = new Option("6,60€","%%")
	data_2_3_1_1 = new Option("6,60€","%")
	data_2_3_2_1 = new Option("6,60€","%%")
	
	data_3_1_1_1 = new Option("6,60€","%")
	data_3_1_2_1 = new Option("6,60€","%")
	data_3_2_1_1 = new Option("6,60€","%")
	data_3_2_2_1 = new Option("6,60€","%")
	data_3_3_1_1 = new Option("6,60€","%")
	data_3_3_2_1 = new Option("6,60€","%")
	data_3_4_1_1 = new Option("6,60€","%")
	data_3_4_2_1 = new Option("6,60€","%")

	data_4_1_1_1 = new Option("6,60€","%")
	data_4_1_2_1 = new Option("6,60€","%")
	data_4_2_1_1 = new Option("6,60€","%")
	data_4_2_2_1 = new Option("6,60€","%")
	data_4_3_1_1 = new Option("6,60€","%")
	data_4_3_2_1 = new Option("6,60€","%")
	data_4_4_1_1 = new Option("6,60€","%")
	data_4_4_2_1 = new Option("6,60€","%")
	
	data_5_1_1_1 = new Option("6,60€","%")
	data_5_1_2_1 = new Option("6,60€","%")
	data_5_2_1_1 = new Option("6,60€","%")
	data_5_2_2_1 = new Option("6,60€","%")
	data_5_3_1_1 = new Option("6,60€","%")
	data_5_3_2_1 = new Option("6,60€","%")
	data_5_4_1_1 = new Option("6,60€","%")
	data_5_4_2_1 = new Option("6,60€","%")



// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<form method="post">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:400px;">
		<option value="value1">- auswählen -</option>
	<option value="value2">Fotos</option>
	<option value="value3">Poster/FineArt</option>
	<option value="value4">Leinwände/Schaumplatten</option>
	<option value="value5">Acryl/AluDibond</option>
	<option value="value6">Fotobücher</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:400px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:400px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<display name="combo3" id="combo_3" onChange="change(this);" style="width:400px;">
	<option value="value1">  </option>

</select>

</form>

Dormilich · 08. Apr. 2016

Ich würde mich tierischst freuen, wenn hier jemand die Zeit aufwenden könnte, mir dieses Script zu vervollständigen.

Laß das Script lieber gleich neu machen. Die Wiederholungen sind ja grausig (DRY-Prinzip) und das eval() ist a) unnütz und b) falsch (getElementById() gibt null zurück und nicht undefined)

Yendor · 08. Apr. 2016

*achselzuck*

Bitte, lass dich aus. Wenn es anders einfacher und schneller geht. Ich würde herzlichst "Danke" sagen.

- - - Aktualisiert - - -

Ich versuche seit 2h, dieses Script hier: Edit fiddle - JSFiddle

mit einzubauen, denn es tut im Grunde genau, was ich will .. sobald eine Option im letzten Select ausgewählt ist, zeigt es den vorher angegebenen Wert an.

Leider auch Erfolglos.

kkapsner · 08. Apr. 2016

Dormilich schrieb:
getElementById() gibt null zurück und nicht undefined

Was bei == bzw. != egal ist... aber ich stimme zu: das Skript ist grausam und gehört in den Papierkorb.

Dormilich · 10. Apr. 2016

kkapsner schrieb:
Was bei == bzw. != egal ist...

ich bezog mich da eher auf den typeof-Wert …

kkapsner · 10. Apr. 2016

Stimmt - da ist es nicht egal... hatte das typeof ganz übersehen - wollte mir anscheinend den Code gar nicht genauer ansehen

@Yendor: Dein Beispiel im fiddle ist auch nicht ideal, da dabei Daten und Funktionalität gemischt werden. Ich würde direkt bei den <option>s im HTML speichern, wie der nächste Schritt aususehen hat: Edit fiddle - JSFiddle - funktioniert so aber nur in modernen Browsern, die Array.from und dataset unterstützten...

Yendor · 11. Apr. 2016

Das ist ein bisschen wie zum Arzt zu gehen und der sagt: "Na sie haben ja Husten oder? Gar nicht gut .. das kann schlimm enden." Und gut ist.

Schön, dass ihr erkennt, dass das Script Müll ist

Das hilft wirklich.

Ich hoffe, dass wir irgendwann im Leben auch nochmal anders herum aufeinander treffen. Also, dass ich etwas weiß, wo ihr Hilfe benötigt. Ich verspreche, ich helfe gern

mikdoe · 11. Apr. 2016

Yendor, was war der Anlass unsachlich zu werden? was hätte man besser machen können?

kkapsner · 11. Apr. 2016

hast du dir mein fiddle angesehen? Du musst da eigentlich nur das HTML an deine Daten anpassen...

Versandkosten Kalkulator

Yendor

New member

Dormilich

New member

Yendor

New member

kkapsner

Super Moderator

Dormilich

New member

kkapsner

Super Moderator

Yendor

New member

mikdoe

Moderator

kkapsner

Super Moderator