Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:javascript:preselect [19/06/2020 16:21] – conny
+++ programmieren:javascript:preselect [Unbekanntes Datum] (aktuell) – Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
-==== PRE SELECT Selectbox ====
+==== PRE SELECT -> Selectbox ====
 Z.B. durch das anklicken eines Bildes in der Selectbox den passenden Eintrag wählen.
-<php>
+Im folgenden Beispiel einfach mal auf die Zahlen in den roten Kästchen klicken und schauen wie sich die Selectbox ändert.
-echo "BLA";
-</php>
+<html>
-<code javascript>
+<select id="leaveCode" >
+  <option value="1">(1) Annual Leave</option>
+  <option value="2">(2) Medical Leave</option>
+  <option value="3">(3) Long Service</option>
+</select>
+<img src="b1.jpg" onclick="selectElement('leaveCode', '1')">
+<img src="b2.jpg" onclick="selectElement('leaveCode', '2')">
+<img src="b3.jpg" onclick="selectElement('leaveCode', '3')">
+<script>
+function selectElement(id, valueToSelect) {
+    let element = document.getElementById(id);
+    element.value = valueToSelect;
+}
+</script>
+</html>
+<code javascript| demo.html>
 <select id="leaveCode" >
-  <option value="10">Annual Leave</option>
+  <option value="1">(1) Annual Leave</option>
-  <option value="11">Medical Leave</option>
+  <option value="2">(2) Medical Leave</option>
-  <option value="14">Long Service</option>
+  <option value="3">(3) Long Service</option>
 </select>
-<img src="b1.jpg" onclick="selectElement('leaveCode', '10')">
+<img src="b1.jpg" onclick="selectElement('leaveCode', '1')">
-<img src="b2.jpg" onclick="selectElement('leaveCode', '11')">
+<img src="b2.jpg" onclick="selectElement('leaveCode', '2')">
-<img src="b3.jpg" onclick="selectElement('leaveCode', '14')">
+<img src="b3.jpg" onclick="selectElement('leaveCode', '3')">
 <script>