• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Variable Datalist Auswahl

H

hans_we

New member
Liebe Community,

vorab, ich habe leider fast gar kein Javascript-Grundwissen, daher hat meine google-Recherche leider auch keinen Erfolg gebracht, ich versuche es daher hier. Mein Anliegen müsste eigentlich leicht zu lösen sein.

Ich habe zwei Felder input1 und input2, bei input1 ist eine Datalist mit "Bilanz" und "Lagerung" hinterlegt. Ich möchte nun, dass javascript für das input2 feld die Datalist "Bilanz" oder "Lagerung" auswählt (welche in meinem Dokument vorhanden sind), je nachdem was man in input1 ausgewählt hat, also kurz gesagt: die list des input2 feldes soll den namen vom input1 feld bekommen.

Vielen Dank schonmal für die Hilfe!

Hans

- - - Aktualisiert - - -

Nochmal der Code zur Veranschaulichung:

HTML: 
<form>
 <input class="input" id="feld1" list="Vorgaben" type="text" name="input1" size="35">
 <input class="input" id="feld2" list="Bilanz ODER Lagerung (je nach Auswahl input1)" type="text" name="input2" size="35">
 </form>

<datalist id="Vorgaben">
<option value="Bilanz">
<option value="Lagerung">
</datalist>

 <datalist id="Bilanz">
<option value="+1000">
<option value="+500">
<option value="+-0">
<option value="-500">
<option value="-1000">
</datalist>

<datalist id="Lagerung">
<option value="Bettruhe">
<option value="OK 30°">
<option value="nur Linksseitenlage">
<option value="nachts Bauchlagerung">
<option value="nur Rechtsseitenlage">
</datalist>
<script>
 
Zuletzt bearbeitet von einem Moderator:
HTML: 
function listCheck(){
var f1 = document.getElementById('feld1');
f1.addEventListener('blur',listf);
function listf(){
var g = this.value.trim();
document.getElementById('feld2').setAttribute('list',g);
}
}listCheck();
 
Zuletzt bearbeitet von einem Moderator:
andreax schrieb:
HTML: 
function listCheck(){
var f1 = document.getElementById('feld1');
f1.addEventListener('blur',listf);
function listf(){
var g = this.value.trim();
document.getElementById('feld2').setAttribute('list',g);
}
}listCheck();
Zum Vergrößern anklicken....
warum vollkommen unnötige zwei ineinander geschachtelte funktionen? ausserdem funktioniert das script nur, wenn am ende des bodys eingefügt (erschließt sich ohne hinweis wohl kaum für jemanden mit "leider fast gar kein Javascript-Grundwissen").

Besser und einfacher:

HTML: 
<!doctype html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Dokumenttitel</title>
	<script>
		"use strict";
		document.addEventListener("DOMContentLoaded", function () {
			document.getElementById("feld1").addEventListener("blur", function(){
				document.getElementById("feld2").setAttribute("list", this.value);
			});
		});
	</script>
</head>

<body>
	<form>
		<input class="input" id="feld1" list="Vorgaben" type="text" name="input1" size="35">
		<input class="input" id="feld2" list="Bilanz ODER Lagerung (je nach Auswahl input1)" type="text" name="input2" size="35">
	</form>
	<datalist id="Vorgaben">
		<option value="Bilanz">
		<option value="Lagerung">
	</datalist>
	<datalist id="Bilanz">
		<option value="+1000">
		<option value="+500">
		<option value="+-0">
		<option value="-500">
		<option value="-1000">
	</datalist>
	<datalist id="Lagerung">
		<option value="Bettruhe">
		<option value="OK 30°">
		<option value="nur Linksseitenlage">
		<option value="nachts Bauchlagerung">
		<option value="nur Rechtsseitenlage">
	</datalist>
</body>

</html>
 
hans_we schrieb:
ich habe leider fast gar kein Javascript-Grundwissen, Mein Anliegen müsste eigentlich leicht zu lösen sein.
Zum Vergrößern anklicken....
Ja das Phänomen ist mir hier schon oft begegnet erst behauptet der User er ist ein JS-noob dann aber weis er wie leicht es eigentlich zu lösen ist :) :)

@zirzofer warum hast dann nicht schon längst geholfen der post steht ja schon seit 13uhr 47
 
andreax schrieb:
@zirzofer warum hast dann nicht schon längst geholfen der post steht ja schon seit 13uhr 47
Zum Vergrößern anklicken....
verzeihung der herr, wie konnte ich nur? welch ein boeses foul, dass ich es wage, 7 Stunden lang nicht in dieses forum zu schauen, obwohl ich dafuer ja hauptamtlich angestellt bin und bezahlt werde?!! :rolleyes:
 
Und ich glaube der Herr hat nur von mir abgeschrieben und machst sich jetzt wichtig.
 
@mikdoe ich glaub nicht das er einen Kaffee trinken soll wo er sich doch schon so aufregt.

- - - Aktualisiert - - -

@hans_we wenn du in den beiden Inputs felt1 und feld2 noch ein placeholder Attribut einfügst ist es etwas übersichtlicher.
HTML: 
 <input class="input" id="feld1" list="Vorgaben" type="text" name="input1" size="35" placeholder="Vorgaben">
 <input class="input" id="feld2" list="Bilanz" type="text" name="input2" size="35" placeholder="Bilanz & Lagerung">
 
Vielen Dank für Eure Hilfe - so funktioniert es genauso, wie ich es mir wünsche!
Hans

- - - Aktualisiert - - -

Wenn jetzt noch jemand Geduld hat, würde ich mich noch über eine weitere Antwort freuen:

Ich habe insgesamt 10 Zeilen feld1[] und feld2[] als array, für jede Zeile gelten dieselben Datalist Inhalte - wie kann ich das mit Javascript umsetzen, dass es für jede einzelne Zeile gilt? Also wenn ich beispielsweise in feld1[5] Bilanz auswähle, dass dann in feld2[5] die Bilanz-Auswahl angezeigt wird?

Hans
 
Ich würde da nicht die Datalist für das <input> ändern, sondern zwei <input>s erstellen - je eines für Bilanz und eines für Lagerung - und dann abhängig vom Wert der ersten Liste das richtige zweite einblenden. Wenn du das Einblenden geschickt über CSS machst, hast du auch kein Problem mit mehreren Paaren:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript"></script>
<style type="text/css">
.secondInput {
	display: none;
}
.Bilanz .secondInput.bilanz, .Lagerung .secondInput.lagerung {
	display: initial;
}
</style>
</head>
<body>
	<form>
		<div>
			<input class="input firstInput" list="Vorgaben" type="text" name="input1[]" placeholder="Vorgaben">
			<input class="input secondInput bilanz" id="feld2" list="Bilanz" type="text" name="bilanz[]" placeholder="Bilanz">
			<input class="input secondInput lagerung" id="feld2" list="Lagerung" type="text" name="lagerung[]" placeholder="Lagerung">
		</div>
		<div>
			<input class="input firstInput" list="Vorgaben" type="text" name="input1[]" placeholder="Vorgaben">
			<input class="input secondInput bilanz" id="feld2" list="Bilanz" type="text" name="bilanz[]" placeholder="Bilanz">
			<input class="input secondInput lagerung" id="feld2" list="Lagerung" type="text" name="lagerung[]" placeholder="Lagerung">
		</div>
		<div>
			<input class="input firstInput" list="Vorgaben" type="text" name="input1[]" placeholder="Vorgaben">
			<input class="input secondInput bilanz" id="feld2" list="Bilanz" type="text" name="bilanz[]" placeholder="Bilanz">
			<input class="input secondInput lagerung" id="feld2" list="Lagerung" type="text" name="lagerung[]" placeholder="Lagerung">
		</div>
		<div>
			<input class="input firstInput" list="Vorgaben" type="text" name="input1[]" placeholder="Vorgaben">
			<input class="input secondInput bilanz" id="feld2" list="Bilanz" type="text" name="bilanz[]" placeholder="Bilanz">
			<input class="input secondInput lagerung" id="feld2" list="Lagerung" type="text" name="lagerung[]" placeholder="Lagerung">
		</div>
		<button>absenden</button>
	</form>

	<datalist id="Vorgaben">
		<option value="Bilanz">
		<option value="Lagerung">
	</datalist>
	<datalist id="Bilanz">
		<option value="+1000">
		<option value="+500">
		<option value="+-0">
		<option value="-500">
		<option value="-1000">
	</datalist>
	<datalist id="Lagerung">
		<option value="Bettruhe">
		<option value="OK 30°">
		<option value="nur Linksseitenlage">
		<option value="nachts Bauchlagerung">
		<option value="nur Rechtsseitenlage">
	</datalist>
	<script>
	Array.from(document.querySelectorAll("form div .input.firstInput")).forEach(function(inp){
		inp.addEventListener("input", function(){
			this.parentNode.className = this.value;
		});
	});
	</script>
</body>
</html>

PS: Warum nimmst du da eigentlich kein <select>?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben