wurzeltraktor
Neues Mitglied
Ich möchte gerne den Vorteil des autofill der Datalist für eine längere Selektion nutzen, bin aber zu sehr JavaScript-Laie, um dies selbst zu realisieren. Meine Versuche mit index, value und text waren leider erfolglos. Was ist der Trick, um eine Auswahl in einer Datalist in eine Variable zu schreiben?
Der Code zeigt den funktionierenden Teil mit select und (m)einen Versuch mit datalist (die später per document.write gefüllt wird). Angezeigt werden soll nachher der Ort, weiterverarbeitet aber das KFZ-Kennzeichen.
Vielen Dank!!
Der Code zeigt den funktionierenden Teil mit select und (m)einen Versuch mit datalist (die später per document.write gefüllt wird). Angezeigt werden soll nachher der Ort, weiterverarbeitet aber das KFZ-Kennzeichen.
HTML:
<html>
<head>
<title>datalist</title>
</head>
<body onload="Reset()">
<script>
function Reset() {
var Select = document.getElementById("OrtSelect");
Select.selectedIndex = 0;
var Datalist = document.getElementById("OrtDataList"); //Funktioniert leider nicht!
Datalist.selectedIndex = 0;
}
</script>
<p>KFZ-Kennzeichen [Select]</p>
<p>
<select id="OrtSelect"/>
<option value="">Ort auswählen</option>
<option value="HD" title="HD">Heidelberg</option>
<option value="KA" title="KA">Karlsruhe</option>
<option value="MA" title="MA">Mannheim</option>
<option value="S" title="S">Stuttgart</option>
<option value="UL" title="UL">Ulm</option>
<option value="">------------</option>
<option value="HH" title="HH">Hamburg</option>
<option value="HB" title="HB">Bremen</option>
</select>
<input type="button" value="Do!" onclick="Feedback_Select()">
</p>
<script>
function Feedback_Select () {
var OrtSelect = document.getElementById("OrtSelect");
var selectedValue = OrtSelect.options[OrtSelect.selectedIndex].value;
var selectedOption = OrtSelect.options[OrtSelect.selectedIndex].text;
if (selectedValue == "")
{
alert("Bitte Ort [Select] auswählen");
return;
}
alert("Kennzeichen [Select] für " + selectedOption + " = " + selectedValue);
{
var Select = document.getElementById("OrtSelect");
Select.selectedIndex = 0;
}
}
</script>
<p>KFZ-Kennzeichen [DataList]</p>
<p>
<input list="OrtDataList" name="OrtDataList" placeholder="Ort eingeben..."/>
<datalist id="OrtDataList">
<option>Heidelberg</option>
<option>Karlsruhe</option>
<option>Mannheim</option>
<option>Stuttgart</option>
<option>Ulm</option>
<option value="">------------</option>
<option>Hamburg</option>
<option>Bremen</option>
</datalist>
<input type="button" value="Do!" onclick="Feedback_Datalist()">
</p>
<script>
function Feedback_Datalist () {
var OrtDataList = document.getElementById("OrtDataList");
var selectedValue = OrtDataList.options[OrtDataList.selectedIndex].value;
var selectedOption = OrtDataList.options[OrtDataList.selectedIndex].text;
if (OrtDataList.selectedIndex == 0)
{
alert("Bitte Ort [Datalist] auswählen");
return;
}
alert("Kennzeichen [Datalist] für " + selectedOption + " = " + selectedValue);
}
</script>
</body>
</html>Vielen Dank!!
Zuletzt bearbeitet:
