• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] select &datalist: ausgewählten Wert in Variable übernehmen

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.

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:
Werbung:
Ja klasse!! Vielen Dank!

Immerhin beruhigt mich an Deiner Antwort, dass ich nicht an einer blöden Banalität hängengeblieben bin ;-)
 
Zuletzt bearbeitet:
Zurück
Oben