[FRAGE] Options mit id, value und Beschriftung für zwei abhängige select-Felder

laser · 16. Aug. 2016

Hallo,
ich habe 2 Form-Selects die Produkte und Deckel abbilden. Leider gibt es nicht zu jedem Produkt alle Deckelvarianten. Gibt es einen Weg per Javascript im zweiten select nur die verfügbaren Deckel anzuzeigen? Mein Problem: Die Beschriftung der Optionsfelder, die values und die ids sollen nicht verändert werden; müssen also mit übergeben werden. Auch das +##.## darf nicht verändert werden, da es zur Berechnung des Gesamtpreises herangezogen wird.
Die unter https://www.w3.org/TR/WCAG20-TECHS/SCR19.html und Dynamic Select Box: Replacing Options Based on Selection aufgezeigten Lösungswege erscheinen mir für meine Zwecke nicht brauchbar, da im ersten Fall nur mit dem value gearbeitet wird und das zweite Beispiel an den mehrteiligen und langen Values mit Leerzeichen scheitert.
Gibt es einen anderen Weg? Lassen sich evtl. bestimmte Options im 2ten Select in Abhängigkeit von der Auswahl im 1sten Select löschen / ausblenden indem man die entspechenden Zeilen dynamisch in Kommentarzeichen setzt? Habt Ihr Beispiele?
Hier die Selects:

HTML:

<select id="Produkte" name="Size" class="form-control">
  <option value="" id="00" selected>...</option>
    <option value="Produkt a weiß +11.00 Eur" id="130">weiß 11,00 EUR</option>
	<option value="Produkt b weiß | eckige Ausführung +20.00 Eur" id="131">weiß | eckige Ausführung 20,00 EUR</option>
	<option value="Produkt c grün | runde Ausführung +10.00 Eur" id="133">grün | runde Ausführung 10,00 EUR</option>
</select>

  
<select id="Deckelvarianten" name="Options" class="form-control">
  <option value="" id="99" selected>Deckel</option>
  <option value="weißer Deckel +1.00 Eur inkl. Versand und 19% MWSt." id="01">Weiß 1,00 Eur</option>
  <option value="orangener Deckel +2.00 Eur inkl. Versand und 19% MWSt." id="02">Orange 2,00 Eur</option>
  <option value="pink Deckel +3.00 Eur inkl. Versand und 19% MWSt." id="03">Pink 3,00 Eur</option>
  <option value="roter Deckel +4.00 Eur inkl. Versand und 19% MWSt." id="04">Rot 4,00 Eur</option>
  <option value="gelber Deckel +4.00 Eur inkl. Versand und 19% MWSt." id="05">Gelb 4,00 Eur</option>
  <option value="blauer Deckel +6.00 Eur inkl. Versand und 19% MWSt." id="06">Blau 6,00 Eur</option>
  <option value="schwarzer Deckel +6.00 Eur inkl. Versand und 19% MWSt." id="07">Schwarz 6,00 Eur</option>
</select>

Verfügbare Kombinationen:

Für id="130" im ersten Selectfeld gibt es id="01" id="06" id="07" im zweiten Selectfeld.
Für id="131" im ersten Selectfeld gibt es id="01" id="02" id="03" id="04" id="05" id="06" im zweiten Selectfeld.
Für id="132" im ersten Selectfeld gibt es id="01" id="04" id="06" id="07" im dritten Selectfeld.

Dankbar für Tips, Hinweise und Anregungen,
Georg

P.S.: Aktualisierung gelöscht, da Ansatz nach Hinweis von paul schmitz verworfen.

paul schmitz · 17. Aug. 2016

laser schrieb:
Lassen sich evtl. bestimmte Options im 2ten Select in Abhängigkeit von der Auswahl im 1sten Select löschen / ausblenden indem man die entspechenden Zeilen dynamisch in Kommentarzeichen setzt?

Sogar ganz sicher. Du musst nur das disabled-Attribut bei den zu versteckenden Optionen hinzufügen.
Detaillierter beschrieben:
Füge jedem Element im ersten Select einen Klick-Eventhandler hinzu, der eine Funktion mit der ID aufruft.
Diese Funktion enthält ein Array, das die aktivierten Eintragsids im zweiten Select beinhaltet.
Setze alle im Select 2 auf disabled, außer, wenn die ID des gerade zu setzendes Elements eine dieser aktivierten IDs ist.

Die mögliche Lösung in deiner Aktualisierung ist sicher irgentwie möglich, jedoch unsauber und aufwendig. Ich würde dir nicht dazu raten.

laser · 17. Aug. 2016

Hmm. Danke für die Anregung. Ich habe den Aktualisierungs-Ansatz tatsächlich verworfen.
Jedoch - das disabled-Attribut stellt die entsprechende Option zwar auf unauswählbar und graut sie aus, die "tote" Zeile bleibt jedoch bestehen. Das ist ungünstig, da die Kunden so zu unnötigen Nachfragen verleitet werden, ob es die deaktivierte Option nicht vielleicht doch gibt. Der nächste Schritt wäre deshalb den Inhalt mit innerHTML z.B. gegen einen Strich - auszutauschen.
Also z.B. so:
wenn id="132" selected, dann

HTML:

document.getElementById("01").innerHTML = '-';
document.getElementById("01").disabled=true;

Das sieht dann allerdings nicht mehr schön aus, wenn ich erst 10 Zeilen mit Strich und erst am unteren Rand des Dropdowns eine tatsächlich vorhandene Option habe. Das Ziel solte es m.E. deshalb immer noch sein die Zeilen wegzubekommen. Ob sich das mit jQuery realisieren läßt? Wichtig ist sicherlich, daß parallel zur erneuten Veränderung der Auswahl im ersten Select zunächst wieder alle Optionen verfügbar gemacht werden.
Gruß Georg

mikdoe · 18. Aug. 2016

laser schrieb:
Das Ziel solte es m.E. deshalb immer noch sein die Zeilen wegzubekommen.

Müsste es nicht document.getElementById("01").parentNode.removeChild(document.getElementById("01")); lauten?
Hab jetzt allerdings den vielen Text hier nur überflogen.

Übrigens: 01 als ID ist ungut. Soweit ich weiß dürfen DOM ID's nicht mit einer Ziffer beginnen. Setz' noch einen Buchstaben davor.

laser · 18. Aug. 2016

Hallo,
danke. Das mit dem Buchstaben ist sicherlich ne gute Idee. Den "Rest" kann ich leider nicht einschätzen, da mir dazu als Rookie leider das ProgramierKnowHow fehlt.
Mein neuer Ansatz ist nun untenstehender. Leider funktioniert das aber noch nicht. Könnt Ihr bitte mal drüberschauen? a132 ist eine Option im ersten Dropdown. Wenn diese gewählt ist sollen b01 und b03 im zweiten Dropdown ausgeblendet werden. Ich würde die getridofoptions() mit onChange im ersten Dropdown aufrufen. bo2, bo4, b05 und b06 sollen weiterhin angezeigt werden. Wird Auswahl im ersten Dropdown verändert, sollen zunächst wieder alle Optionen eingebaut und dann die der neuen Auswahl entsprechenden ausgeblendet werden. Beispiel: Wid die Auswahl im ersten dropdown von a132 auf a133 verändert sollen b01, b02 und b04 ausgeblendet werden, b03, b05 und b06 aber verfügbar bleiben.

Code:

<select id="selectA" name="Size" onchange="ReadForm (this.form, false);getridofoptions();">
  <option value="" id="a00" selected>1. Wählen Sie Ihre Variante</option>
    <option value="a &szlig alabla" id="a130">weiß 5,00 EUR</option>
    <option value="b &szlig blabla" id="a131">weiß 6,00 EUR</option>
    <option value="c &szlig clabla" id="a132">weiß 7,00 EUR</option>
    <option value="d &szlig dlabla" id="a133">weiß 8,00 EUR</option>
    <option value="e &szlig eabla" id="a134">weiß 9,00 EUR</option>
  </select>

<br>
<select id="selectB" name="Options"  onchange="ReadForm (this.form, false);getridofoptions();">
  <option value="" id="b99" selected>2. Wählen Sie aus:</option>
  <option value="Test ha" id="b01">Test ha</option>
  <option value="Test ho" id="b02">Test ho</option>
  <option value="Test hk" id="b03">Test hk</option>
  <option value="Test kl" id="b04">Testreihe kl</option>
  <option value="Test km" id="b05">Testreihe km</option>
  <option value="Test lo" id="b06">Testreihe  lo</option>
  </select>

<script language="JavaScript" type="text/javascript">
function getridofoptions()
{
    if(document.getElementById('a132').selected==True)
    {
        var x = document.getElementById("b01");
		x.remove(x.selectedIndex);
        var x = document.getElementById("b02");
		x.remove(x.selectedIndex);
        var x = document.getElementById("b04");
		x.remove(x.selectedIndex);
    }
    else
    {
    }
    if(document.getElementById('a133').selected==True)
    {
        var x = document.getElementById("b01");
		x.remove(x.selectedIndex);
        var x = document.getElementById("b03");
		x.remove(x.selectedIndex);
    }
    else
    {
    }
}
</script>

kkapsner · 18. Aug. 2016

Das ist viel zu kompliziert. Wenn du sauber Programmierung von Inhalten trennst (also ins HTML schreibst, welche <option>s zusammen gehören), wird das ganze viel einfacher:

Code:

<select id="selectA" name="Size">
  <option value="" id="a00" selected>1. Wählen Sie Ihre Variante</option>
    <option value="a &szlig alabla" id="a130">weiß 5,00 EUR</option>
    <option value="b &szlig blabla" id="a131">weiß 6,00 EUR</option>
    <option value="c &szlig clabla" id="a132">weiß 7,00 EUR</option>
    <option value="d &szlig dlabla" id="a133">weiß 8,00 EUR</option>
    <option value="e &szlig eabla" id="a134">weiß 9,00 EUR</option>
  </select>

<br>
<select id="selectB" name="Options"  data-parent-id="selectA">
  <option value="" id="b99" selected>2. Wählen Sie aus:</option>
  <option value="Test ha" id="b01" data-parent-option-ids="a130,a131">Test ha</option>
  <option value="Test ho" id="b02" data-parent-option-ids="a130,a132">Test ho</option>
  <option value="Test hk" id="b03" data-parent-option-ids="a132,a131">Test hk</option>
  <option value="Test kl" id="b04" data-parent-option-ids="a132,a133">Testreihe kl</option>
  <option value="Test km" id="b05" data-parent-option-ids="a132,a134">Testreihe km</option>
  <option value="Test lo" id="b06" data-parent-option-ids="a133,a134">Testreihe  lo</option>
  </select>

<script>
function initDependentSelect(select){
	var parentSelect = document.getElementById(select.dataset.parentId);
	if (parentSelect){
		var options = Array.prototype.slice.call(select.options);
		options.forEach(function(op){
			if (op.dataset.parentOptionIds){
				op.parentOptionIds = op.dataset.parentOptionIds.split(",");
			}
		});
		function update(){
			select.options.length = 0;
			var parentOptionId = parentSelect.options[parentSelect.selectedIndex].id;
			options.forEach(function(op){
				if (!op.parentOptionIds || op.parentOptionIds.indexOf(parentOptionId) !== -1){
					select.appendChild(op);
				}
			});
		}
		parentSelect.addEventListener("change", update, false);
		update();
	}
}
initDependentSelect(document.getElementById("selectB"));
</script>

laser · 19. Aug. 2016

Ich DANKE DIR sehr herzlich! Georg

- - - Aktualisiert - - -

Nun habe ich doch noch 'ne Rückfrage. Ich würde mit Auswahl der optionen gernezusätzlich einen Detail-Text ändern und habe dafür untenstehenden Ansatz. DetailtextA() wird onchange im Kopf des oberen Select-Felds aufgerufen. Im zweiten Select heißt die Funktion DetailtextB(). Leider funktionierts nicht. Siehst Du den Fehler? Soll ich hierfür einen extra Thread aufmachen da das ja etwas vond er ursprünglichen Fragestellung wegführt?
Gruß&Dank Georg

Code:

<!-- Detailtext -->
	
	<script>
function DetailtextA(){
{
    if(document.getElementById('a130').selected==true)
    {
  var NeuA = "Beschreibung im Detail";
 
  function Ändern () {
    document.getElementById("BeschreibungA").innerHTML = NeuA;
	}
    }
    else
    {
	}
    if(document.getElementById('a131').selected==true)
    {
  var NeuA = "Beschreibung im Detail";
 
  function Ändern () {
    document.getElementById("BeschreibungA").innerHTML = NeuA;
	}
    }
    else
    {
	}
}
</script>
<span id="BeschreibungA"></span>		

	<script>
function DetailtextB(){
{
    if(document.getElementById('b01').selected==true)
    {
  var NeuB = "Beschreibung im Detail";
 
  function Ändern () {
    document.getElementById("BeschreibungB").innerHTML = NeuB;
	}
    }
    else
    {
	}
}
</script>
<span id="BeschreibungB"></span>		

<!-- Detailtextende -->

- - - Aktualisiert - - -

und - eine zweite Ergänzungsfrage: Nach was muß ich suchen, um eine Lösung zu finden wie ich einen Link von einer anderen Seite aus gestalten muß, damit dieser die Seite mit den Potionsfeldern mit einer bestimmten Voreinstellung öffnet?

andreax · 19. Aug. 2016

Umlaute im Quelltext sind nicht möglich in js.
was aber in deinem Script egal ist weil du diese function gar nicht brauchst.
dann ist eine geschweifte Klammer zu viel ist aber wahscheinlich copy n past
und die script tags stören. Aber sonst funktioniert es . hab's getestet.
hab die Beiden Scripte fusioniert

PHP:

<select id="selectA" name="Size">
  <option value="" id="a00" selected>1. Wählen Sie Ihre Variante</option>
    <option value="a &szlig alabla" id="a130" >weiß 5,00 EUR</option>
    <option value="b &szlig blabla" id="a131">weiß 6,00 EUR</option>
    <option value="c &szlig clabla" id="a132">weiß 7,00 EUR</option>
    <option value="d &szlig dlabla" id="a133">weiß 8,00 EUR</option>
    <option value="e &szlig eabla" id="a134">weiß 9,00 EUR</option>
  </select>

<br>
<select id="selectB" name="Options"  data-parent-id="selectA">
  <option value="" id="b99" selected >2. Wählen Sie aus:</option>
  <option  value="Test ha" id="b01" data-parent-option-ids="a130,a131">Test ha 1</option>
  <option value="Test ho" id="b02"  data-parent-option-ids="a130,a132"  >Test ho 2</option>
  <option value="Test hk" id="b03" data-parent-option-ids="a132,a131">Test hk 3</option>
  <option value="Test kl" id="b04" data-parent-option-ids="a132,a133">Testreihe kl 4</option>
  <option value="Test km" id="b05" data-parent-option-ids="a132,a134">Testreihe km 5</option>
  <option value="Test lo" id="b06" data-parent-option-ids="a133,a134">Testreihe  lo 6</option>
  </select>

<p id="BeschreibungA" style="border:1px solid;width:300px;height:auto;" >Beschreibung A</p>		

<p id="BeschreibungB"  style="border:1px solid;width:300px;height:auto;" >Beschreibung B</p>		
	
<script>
function initDependentSelect(select){
	var parentSelect = document.getElementById(select.dataset.parentId);

	if (parentSelect){
		var options = [].slice.call(select.options);
		options.forEach(function(op){
			if (op.dataset.parentOptionIds){
				op.parentOptionIds = op.dataset.parentOptionIds.split(",");
				
			}
		});
		function update(){
			select.options.length = 0;
			var parentOptionId = parentSelect.options[parentSelect.selectedIndex].id;
			options.forEach(function(op){
				if (!op.parentOptionIds || op.parentOptionIds.indexOf(parentOptionId) !== -1){
					select.appendChild(op);
				}
			});
			///////////////////////////////////////////////////
			DetailtextA();//Funktionsaufruf am ende der update Funktion 
			///////////////////////////////////////////////////
		}
		parentSelect.addEventListener("change", update, false);
		update();
	}
///////////////////////////////////////////////////////////////////////
document.getElementById('selectB').onchange = DetailtextB;
//onchange Event gebunden an selectB mit DetailtextB als Eventhandler
///////////////////////////////////////////////////////////////////////
}
initDependentSelect(document.getElementById("selectB"));



//<!-- Detailtext -->
	

function DetailtextA()
{
	var NeuA = "BeschreibungA";//Standardtext wenn Element nicht selected
    if(document.getElementById('a130').selected)
    {
		NeuA = "Beschreibung im Detail A130";//Variable überschreiben wenn selected
		//NeuA = document.getElementById('a130').value; //Alternativ überschreiben mit value
    }
    if(document.getElementById('a131').selected)
    {
		NeuA = "Beschreibung im Detail A131";
    }
	//////////////////////////////////////////////////////////////////////////
    document.getElementById("BeschreibungA").innerHTML = NeuA;
	//Ausgabe in Beschreibung    /////////////////////////////////////////////
}

function DetailtextB()
{
	var NeuB = "BeschreibungB";
    if(document.getElementById('b01').selected)
    {
     NeuB = "Beschreibung im Detail B01";
	}
 
    document.getElementById("BeschreibungB").innerHTML = NeuB;
    
}

//<!-- Detailtextende -->
</script>

Wegen der beabsichtigten Voreinstellung kannst du entweder direkt im HTML das Option Tag als selectded markieren.
oder du sendest get variablen mit .

laser · 20. Aug. 2016

Super. Vielen Dank! Das mit dem Link muß ich dann wohl über get machen, da die Einstellungen je nach Link unterschiedlich sein werden. Konkret geht es mir darum eine bestimmte Produktvariante so aus einer Galerie heraus zu verlinken, so, daß im Formular gleich die richtigen Options gewählt sind und der Käufer nur noch auf "jetzt kaufen" klicken muß.
Schönes Wochenende, Georg

andreax · 20. Aug. 2016

laser schrieb:
Super. Vielen Dank!

Bitte sehr

Wegen der get Vars falls du kein php verwendest kannst du get vars auch mit javascript auslesen allerdings musst du diese dann url decoden und per Hand zerlegen.

HTML:

<!-- sender html -->
<a href="anders.html?A130,A131,b01"	target="_self" >hier hin</a>
<!-- //////////////////////////////////////////////////////////////////////////////////-->

<!-- empfänger html -->

<script>

var request = decodeURIComponent(document.URL);
var ra = request.split('?');
ra = ra[1].split(',');

console.log(ra[0].toString());

</script>

laser · 22. Aug. 2016

@andreax
Hallo andreax,
sag mal kann es sein, daß sich beim Zusammenführen der Scripts ein Fehler eingeschlichen hat? Bei mir aktualisiert sich BeschreibungB nur, wenn in selectA eine Auswahl getroffen wurde der alle Varianten aus SelectB zugeordnet sind. Dies ist bei weiß 5,00 EUR und weiß 6,00 EUR der Fall. Bei weiß 7,00 EUR, weiß 8,00 EUR und weiß 9,00 EUR ändert sich die BeschreibungB nicht. Hinweis: es gibt mehrere Fälle in denen die Varianten aus SelectB nicht allen Varianten aus SelectA zuordenbar sind.
Beste Grüße, Georg

andreax · 22. Aug. 2016

Hallo laser
Ich hab jetzt nicht alle fälle in die Funktionen eingetragen weil ich dachte das machst du selber.
Darum habe ich auch die Kommentare so hervorgehoben .
ja und textB kann man nur ausgeben wenn man zuerst von A ausgewählt hat dann erst werden die
options in selectB eingehängt .

Hab jetzt mal alle Varianten getestet und es stimmt,dass nicht bei a der Text für B ausgegeben wird. Habe die betreffenden Stellen geändert müsste so passen

PHP:

//<!-- Detailtext -->
    

function DetailtextA(e)
{
    var NeuA = "BeschreibungA";//Standardtext wenn Element nicht selected
	if(document.getElementById('a130').selected) { NeuA = "Beschreibung im Detail A130"; }
   	if(document.getElementById('a131').selected) { NeuA = "Beschreibung im Detail A131"; }
	if(document.getElementById('a132').selected) { NeuA = "Beschreibung im Detail A132"; }
	if(document.getElementById('a133').selected) { NeuA = "Beschreibung im Detail A133"; }
	if(document.getElementById('a134').selected) { NeuA = "Beschreibung im Detail A134"; }
	
    //////////////////////////////////////////////////////////////////////////
    document.getElementById("BeschreibungA").innerHTML = NeuA;
	document.getElementById("BeschreibungB").innerHTML = 'Beschreibung B';
    //Ausgabe in Beschreibung    /////////////////////////////////////////////
  document.getElementById('selectB').selectedIndex = 0;	//selectB immer auf 1. Option stellen
}

function DetailtextB()
{
    var NeuB = "Beschreibung B";
    var idx = this.selectedIndex;


    if(this[idx].id == 'b01' ){NeuB = "Beschreibung im Detail B01";}
    if(this[idx].id == 'b02' ){ NeuB = "Beschreibung im Detail B02";}
    if(this[idx].id == 'b03' ){ NeuB = "Beschreibung im Detail B03";}
    if(this[idx].id == 'b04' ){ NeuB = "Beschreibung im Detail B04";}
    if(this[idx].id == 'b05' ){ NeuB = "Beschreibung im Detail B05";}
    if(this[idx].id == 'b06' ){ NeuB = "Beschreibung im Detail B06";} 
     
    document.getElementById("BeschreibungB").innerHTML = NeuB;
    
}

//<!-- Detailtextende -->

habs getestet passt soweit .

laser · 23. Aug. 2016

@andreax
Nun funktioniert es. Danke Dir!
Trotzdem gibt es leider gibt es jedoch einen Konflikt mit zwei anderen Scripten auf der Seite. Hast Du eine Idee, wie ich das verhindern kann?
Das erste Script soll ein Bild austauschen (s.u.) und wird in den selects per onchange="ReadForm (this.form, false);updateImage('image1', getImageSrc.bind(undefined, this.form));" aufgerufen:

Code:

<!-- Vorschaubild -->
    <script>
    function updateImage(id, srcCallback){
	    var img = document.getElementById(id);
	    if (img){
	    	img.src = srcCallback();
	    }
    }
    
    function getImageSrc(form){
    	var sel1 = form.Size;
    	var sel2 = form.Options;
    	return "img/preview/" + sel1.options[sel1.selectedIndex].id + sel2.options[sel2.selectedIndex].id + ".jpg";
    }
    </script>
<!-- Vorschaubildende -->

Das zweite Script addiert Preise. Auch hier scheint das Zusammenspiel nicht zu klappen. Haste ne Idee?

Code:

<script type="text/javascript">
<!--
//
function Euro (val) {  // force to valid Euro amount
var str,pos,rnd=0;
  if (val < .995) rnd = 1;  // for old Netscape browsers
  str = escape (val*1.0 + 0.005001 + rnd);  // float, round, escape
  pos = str.indexOf (".");
  if (pos > 0) str = str.substring (rnd, pos + 3);
  return str;
}

var amt,des,obj,val,op1a,op1b,op2a,op2b,itmn;

function ChkTok (obj1) {
var j,tok,ary=new Array ();       // where we parse
  ary = val.split (" ");          // break apart
  for (j=0; j<ary.length; j++) {  // look at all items
// first we do single character tokens...
    if (ary[j].length < 2) continue;
    tok = ary[j].substring (0,1); // first character
    val = ary[j].substring (1);   // get data
    if (tok == "@") amt = val * 1.0;
    if (tok == "+") amt = amt + val*1.0;
    if (tok == "%") amt = amt + (amt * val/100.0);
     if (tok == "-") amt = amt - val*1.0;
    if (tok == "#") {             // record item number
      if (obj1.item_number) obj1.item_number.value = val;
      ary[j] = "";                // zap this array element
    }
// Now we do 3-character tokens...
    if (ary[j].length < 4) continue;
    tok = ary[j].substring (0,3); // first 3 chars
    val = ary[j].substring (3);   // get data
    if (tok == "s1=") {           // value for shipping
      if (obj1.shipping)  obj1.shipping.value  = val;
      ary[j] = "";                // clear it out
    }
    if (tok == "s2=") {           // value for shipping2
      if (obj1.shipping2) obj1.shipping2.value = val;
      ary[j] = "";                // clear it out
    }
  }
  val = ary.join (" ");           // rebuild val with what's left
}

function StorVal () {
var tag;
  tag = obj.name.substring (obj.name.length-2);  // get flag
  if      (tag == "1a") op1a = op1a + " " + val;
  else if (tag == "1b") op1b = op1b + " " + val;
  else if (tag == "2a") op2a = op2a + " " + val;
  else if (tag == "2b") op2b = op2b + " " + val;
  else if (tag == "3i") itmn = itmn + " " + val;
  else if (des.length == 0) des = val;
  else des = des + ", " + val;
}

function ReadForm (obj1, tst) { // Read the user form
var i,j,pos;
  amt=0;des="";op1a="";op1b="";op2a="";op2b="";itmn="";
  if (obj1.baseamt) amt  = obj1.baseamt.value*1.0;  // base amount
  if (obj1.basedes) des  = obj1.basedes.value;  // base description
  if (obj1.baseon0) op1a = obj1.baseon0.value;  // base options
  if (obj1.baseos0) op1b = obj1.baseos0.value;
  if (obj1.baseon1) op2a = obj1.baseon1.value;
  if (obj1.baseos1) op2b = obj1.baseos1.value;
  if (obj1.baseitn) itmn = obj1.baseitn.value;
  for (i=0; i<obj1.length; i++) {     // run entire form
    obj = obj1.elements[i];           // a form element
    if (obj.type == "select-one") {   // just selects
      if (obj.name == "quantity" ||
          obj.name == "amount") continue;
      pos = obj.selectedIndex;        // which option selected
      val = obj.options[pos].value;   // selected value
      ChkTok (obj1);                  // check for any specials

      if (obj.name == "on0" ||        // let this go where it wants
          obj.name == "os0" ||
          obj.name == "on1" ||
          obj.name == "os1") continue;

      StorVal ();

    } else
    if (obj.type == "checkbox" ||     // just get checkboxex
        obj.type == "radio") {        //  and radios
      if (obj.checked) {
        val = obj.value;              // the value of the selection
        ChkTok (obj1);
        StorVal ();
      }
    } else
    if (obj.type == "select-multiple") {  //one or more
      for (j=0; j<obj.options.length; j++) {  // run all options
        if (obj.options[j].selected) {
          val = obj.options[j].value; // selected value (default)
          ChkTok (obj1);
          StorVal ();
        }
      }
    } else
    if ((obj.type == "text" ||        // just read text,
         obj.type == "textarea") &&
         obj.name != "tot" &&         //  but not from here
         obj.name != "quantity") {
      val = obj.value;                // get the data
      if (val == "" && tst) {         // force an entry
        alert ("Enter data for " + obj.name);
        return false;
      }
      StorVal ();
    }
  }
// Now summarize stuff we just processed, above
  if (op1a.length > 0) obj1.on0.value = op1a;
  if (op1b.length > 0) obj1.os0.value = op1b;
  if (op2a.length > 0) obj1.on1.value = op2a;
  if (op2b.length > 0) obj1.os1.value = op2b;
  if (itmn.length > 0) obj1.item_number.value = itmn;
  obj1.item_name.value = des;
  obj1.amount.value = Euro (amt);
  if (obj1.tot) obj1.tot.value = "€ " + Euro (amt);
}
//-->
</script>

andreax · 23. Aug. 2016

hallo lasa
onchange="ReadForm (this.form, false);updateImage('image1', getImageSrc.bind(undefined, this.form));"
das undefined irritiert mich und wo ist this.form ?
ich weis jetzt so auf die schnelle nicht wie ich das Script testen könnte mir fehlt auf alle fälle mal das Formular.

was kannst du tun ? versuch mit Hilfe der Konsole das Verhalten der functions zu checken.
Z.B.

Code:

 function updateImage(id, srcCallback){
	    var img = document.getElementById(id);
	    if (img){
	    	img.src = srcCallback();
        //Z.B.
         console.log(img.src); // dann müsste in der Konsole  der Pfad zu lesen sein  wenn nicht hast du schon einen Anhaltspunkt  
                            //usw. füge überall wo eingaben verarbeitet werden so ein console Konstrukt ein um eventuelle Fehler zu erhaschen.
	    }
    }

mfg

laser · 24. Aug. 2016

@andreax
Moin hab Dir ne Nachricht geschickt, da ich das Ganze noch nicht offen zugänglich machen kann...

[FRAGE] Options mit id, value und Beschriftung für zwei abhängige select-Felder

laser

New member

paul schmitz

New member

laser

New member

mikdoe

Moderator

laser

New member

kkapsner

Super Moderator

laser

New member

andreax

Guest

laser

New member

andreax

Guest

laser

New member

andreax

Guest

laser

New member

andreax

Guest

laser

New member