[GELÖST] Bildpfad aus Id von zwei Select-Feldern

[laser]

Moin,
ich habe zwei select-Felder und will nun aus der ID der gewählten Optionen einen Bildpfad zusammenbauen. Leider gelingt das nicht. Es wird result2 und nicht das Bild angezeigt. Ersetze ich die erste spitze Klamemr durch < wird der Code zwar angezeigt, aber nicht das Bild. Hat jemand eine bessere Lösung? "Value" ist bereits anderweitig belegt. onchange verwende ich da der Pfad/das Bild mit jeder Veränderung der Auswahl aktualisiert werden soll. <img src='img/preview/0102.jpg'> ist der Wert für das Bild das beim Aufruf der Seite angezeigt werden soll. Deshalb sind die entsprechenden ... Optionen als selected markiert.
Mit Dank für Tips, Georg

Hier mein Code:

<script>
window.showOptions1 = function(s) {
  document.getElementById("result1").innerHTML = "<img src='img/preview/" + s[s.selectedIndex].id;
}

window.showOptions2 = function(s) {
  document.getElementById("result2").innerHTML = s[s.selectedIndex].id + ".jpg'>";
}

total = result1 + result2;
alert(total);
</script>

<select onchange="window.showOptions1(this)">
   <option value="" id="01" selected>...</option>
   <option value="werta" id="10">Text Item 1a</option>
   <option value="wertb" id="20">Text Item 1b</option>
</select>

<select onchange="window.showOptions2(this)">
   <option value="" id="02" selected>...</option>
   <option value="wertc" id="30">Text Item 1c</option>
   <option value="wertd" id="40">Text Item 1d</option>
</select>

<hr><span id="result1"></span><span id="result2"></span>

 

[salazar]

Hi,
versuche es mal wie folgt:

<script>

		var selection01, selection02;

		showOptions1 = function(s) {

			selection01 = "<img src='img/preview/" + s[ s.selectedIndex ].id;

			getResult();
			

		};

		showOptions2 = function(s) {

			selection02 = s[ s.selectedIndex ].id + ".jpg'>";

			getResult();

		};

		function getResult() {

			var total = selection01 + selection02;

			console.log( total );

		};

	</script>

<select id="select1" onchange="showOptions1(this)">
		<option value="" id="01" selected>...</option>
		<option value="werta" id="10">Text Item 1a</option>
		<option value="wertb" id="20">Text Item 1b</option>
	</select>

	<select id="select2" onchange="showOptions2(this)">
		<option value="" id="02" selected>...</option>
		<option value="wertc" id="30">Text Item 1c</option>
		<option value="wertd" id="40">Text Item 1d</option>
	</select>

	<hr><span id="result1"></span><span id="result2"></span>

Ist nur ein Beispiel. Aber vielleicht hilft es dir ja weiter.

Cheers

 

[Dormilich]

Dein code erzeugt invalides HTML. Du verteilst den img tag auf zwei spans. das wird natürlich niemals als ein img tag interpretiert

 

[laser]

Hallo Salazar,
hab vielen Dank für Deine Antwort. Leider bin ich nicht besonders fit in Javascript und mit dem "Hinfrickeln" hat es leider nicht geklappt. Eigentlich müßte ich doch nur den Span "Bild" mit dem Wert der Variable "total" via inner.html überschreiben. Oder? Da dann ja nur ein Span ersetzt wird müßte es ich doch nun um valides HTML handeln. Oder? Der Hinweis von Dormilich leuchte mir ein. Auch dafür danke ich herzlich.
Bis Du so nett uns siehst es Dir nochmals an? Vielen Dank Georg

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


		var selection01, selection02;

		showOptions1 = function(s) {

			selection01 = "<img src='img/preview/" + s[ s.selectedIndex ].id;

			getResult();
			

		};

		showOptions2 = function(s) {

			selection02 = s[ s.selectedIndex ].id + ".jpg'>";

			getResult();

		};

		function getResult() {

			var total = selection01 + selection02;

			console.log( total );

		};
		
		document.getElementById("Bild").innerHTML = total;

// -->
</script>

<select id="select1" onchange="showOptions1(this)">
		<option value="" id="01" selected>...</option>
		<option value="werta" id="10">Text Item 1a</option>
		<option value="wertb" id="20">Text Item 1b</option>
	</select>

	<select id="select2" onchange="showOptions2(this)">
		<option value="" id="02" selected>...</option>
		<option value="wertc" id="30">Text Item 1c</option>
		<option value="wertd" id="40">Text Item 1d</option>
	</select>

	<hr><span id="Bild"></span>

 

[salazar]

<script>

		var selection01, selection02;

		showOptions1 = function(s) {

			selection01 = "<img src='img/preview/" + s[ s.selectedIndex ].id;

			getResult();
			

		};

		showOptions2 = function(s) {

			selection02 = s[ s.selectedIndex ].id + ".jpg'>";

			getResult();

		};

		function getResult() {

			var total = selection01 + selection02;

			console.log( total );

			document.getElementById("Bild").innerHTML = total;

		};

	</script>

<select id="select1" onchange="showOptions1(this)">
		<option value="" id="01" selected>...</option>
		<option value="werta" id="10">Text Item 1a</option>
		<option value="wertb" id="20">Text Item 1b</option>
	</select>

	<select id="select2" onchange="showOptions2(this)">
		<option value="" id="02" selected>...</option>
		<option value="wertc" id="30">Text Item 1c</option>
		<option value="wertd" id="40">Text Item 1d</option>
	</select>

	<hr><span id="Bild">---</span>

meinste so?

 

[Dormilich]

Warum versuchst du eigentlich, das Bild durch zwei getrennte Funktionen zusammenzufrickeln?

 

[laser]

@salazar:
Grr. Da hätte selbst ich drauf kommen können. Danke!

@Dormilich: Ganz ehrlich? Weil ich es nicht besser kann. Ich denke allerdings, daß das in diesem Fall auch nicht gar so dramatisch ist, da es sich nur um ein kurzes Stückchen Code handelt. Oder gibt es außer Eleganz und Effizienz noch ein Argument? Wenn ja, dann lasse ich mich aber gerne belehren wie ichs besser machen könnte. Mit Dank im Voraus, Georg

 

[kkapsner]

... und globale Variablen sind für so etwas extrem schlecht geeignet.

<script>
function updateImage(id, srcCallback){
	var img = document.getElementById(id);
	if (img){
		img.src = srcCallback();
	}
}

function getImageSrc(form){
	var sel1 = form.select1;
	var sel2 = form.select2;
	return "img/preview/" + sel1.options[sel1.selectedIndex].id + sel2.options[sel2.selectedIndex].id + ".jpg";
}
</script>

<form id="form1">
	<select name="select1" onchange="updateImage('image1', getImageSrc.bind(undefined, this.form))">
		<option value="" id="01" selected>...</option>
		<option value="werta" id="10">Text Item 1a</option>
		<option value="wertb" id="20">Text Item 1b</option>
	</select>

	<select name="select2" onchange="updateImage('image1', getImageSrc.bind(undefined, this.form))">
		<option value="" id="02" selected>...</option>
		<option value="wertc" id="30">Text Item 1c</option>
		<option value="wertd" id="40">Text Item 1d</option>
	</select>
</form>

<hr>
<img id="image1">
<script>updateImage("image1", getImageSrc.bind(undefined, document.getElementById("form1")));</script>

- ungetestet.

 

[Dormilich]

Oder gibt es außer Eleganz und Effizienz noch ein Argument?

Logik.

Du willst ein Bild erzeugen. Dafür ist also auch eine Funktion (haupt)verantwortlich. Schließlich muss das Bild immer erstellt werden, wenn irgendeins der Selects seinen value ändert.

 

[laser]

Ich danke Euch! Ihr habt toll geholfen! Georg

 

[mikdoe]

ist das damit gelöst?

 

[kkapsner]

Ich danke Euch!

Bitte - gern geschehen.

 

[laser]

Ja ist gelöst