{"id":215,"date":"2018-03-18T18:32:44","date_gmt":"2018-03-18T17:32:44","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=215"},"modified":"2020-11-07T20:30:32","modified_gmt":"2020-11-07T19:30:32","slug":"abhaengige-combo-boxen-fuer-formulare","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/215\/abhaengige-combo-boxen-fuer-formulare\/","title":{"rendered":"Abh\u00e4ngige Combo-Boxen f\u00fcr Formulare"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ekiwi.de\/index.php\/215\/abhaengige-combo-boxen-fuer-formulare\/#Anlegen_der_Comboboxen\" >Anlegen der Comboboxen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ekiwi.de\/index.php\/215\/abhaengige-combo-boxen-fuer-formulare\/#Das_Java-Script\" >Das Java-Script<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ekiwi.de\/index.php\/215\/abhaengige-combo-boxen-fuer-formulare\/#Download_Beispiel\" >Download Beispiel<\/a><\/li><\/ul><\/nav><\/div>\n<p>Nehmen wir an, wir haben ein Formular mit zwei Combo-Boxen. W\u00e4hlt man einen Eintrag in der Ersten aus, soll sich der Inhalt der Zweiten dynamisch anpassen.<\/p>\n<p><!--more--><\/p>\n<p><a href=\"\/wp-custom\/combobox\/formular.htm\" target=\"_blank\" rel=\"noopener noreferrer\">Hier ein Beispiel<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-216\" src=\"\/wp-content\/uploads\/2018\/03\/combo.png\" alt=\"\" width=\"600\" height=\"400\" srcset=\"\/wp-content\/uploads\/2018\/03\/combo.png 600w, \/wp-content\/uploads\/2018\/03\/combo-300x200.png 300w, \/wp-content\/uploads\/2018\/03\/combo-120x80.png 120w, \/wp-content\/uploads\/2018\/03\/combo-480x320.png 480w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<hr>\n<p>Wie funktioniert das Ganze? Ich beschreibe das hier am Beispielformular. Ich beziehe ich mich auch auf unsere Software <a title=\"Online Formular Generator\" href=\"https:\/\/da-software.net\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">DA-FormMaker<\/a>, aber das Ganze funktioniert in jedem Formular.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anlegen_der_Comboboxen\"><\/span>Anlegen der Comboboxen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Comboboxen werden ganz normal in HTML oder im DA-FormMaker angelegt.<\/p>\n<p>Die Erste: diese wird bei \u00c4nderung den Inhalt der Zweiten ver\u00e4ndern:<\/p>\n<pre>&lt;select name=\"Stadt\" id=\"selectStadt\" size=\"1\" onchange=\"changeSelect()\"&gt;\r\n\t&lt;option&gt;L\u00fcbben&lt;\/option&gt;\r\n\t&lt;option&gt;Buchloe&lt;\/option&gt;\r\n\t&lt;option&gt;Kaufbeuren&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n<\/pre>\n<p>Wir haben hier einen Event-Handler hinzugef\u00fcgt: onchange=&#8220;changeSelect()&#8220;. D.h. wenn die Auswahl sich \u00e4ndert, wird die Funktion &#8222;changeSelect&#8220; aufgerufen. Diese werden wir sp\u00e4ter hinzuf\u00fcgen.<\/p>\n<p>Nun legen wir die zweite Combo-Box an:<\/p>\n<pre>&lt;select name=\"Hotel\" id=\"selectHotel\" size=\"1\"&gt;\r\n\t&lt;option&gt;Test&lt;\/option&gt;\r\n&lt;\/select&gt; \r\n<\/pre>\n<p>Im Prinzip brauchen wir keine &#8222; hier, da wir diese mittels Script setzen werden. Ich habe hier trotzdem eine Option mit dem Namen &#8222;Test&#8220; eingef\u00fcgt. Wenn diese erscheint im fertigen <a title=\"Online form generator\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formular<\/a>, haben wir einen Fehler gemacht. \ud83d\ude42<\/p>\n<p>Zu beachten ist hier noch der Wert des Attributs &#8222;id&#8220;: &#8222;selectStadt&#8220; und &#8222;selectHotel&#8220;. Diese IDs ben\u00f6tigen wir noch im Java-Script.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_Java-Script\"><\/span>Das Java-Script<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Logik m\u00fcssen wir nun in etwas Java-Script realisieren:<\/p>\n<pre>&lt;script type=\"text\/javascript\"&gt;\r\n&lt;!--\r\nfunction changeSelect() {\r\n\t\r\n\tvar selectStadt = document.getElementById(\"selectStadt\");\r\n\tvar index = selectStadt.selectedIndex;\r\n\t\r\n\t\/\/alle elemente l\u00f6schen\r\n\tvar selectHotel = document.getElementById(\"selectHotel\");\r\n\r\n\tremoveOptions(selectHotel);\r\n\t\r\n\t\/\/jetzt die neuen Elemente hinzuf\u00fcgen\t\r\n\tswitch (index) {\r\n\t\tcase 0: \/\/ erste option\r\n\t\t\tselectHotel.add(generateOption(\"Hotel Kiwi\"), null);\t\r\n\t\t\tselectHotel.add(generateOption(\"Hotel Spreewald\"), null);\t\r\n\t\tbreak;\r\n\t\t\r\n\t\tcase 1: \/\/zweite Option\r\n\t\t\tselectHotel.add(generateOption(\"Stadthotel\"), null);\t\r\n\t\t\tselectHotel.add(generateOption(\"Pension Tanne\"), null);\t\r\n\t\t\r\n\t\tbreak;\r\n\t\t\r\n\t\tcase 2: \/\/dritte Option\r\n\t\t\tselectHotel.add(generateOption(\"Hotel am Turm\"), null);\t\r\n\t\t\tselectHotel.add(generateOption(\"Hotel Hasen\"), null);\t\r\n\t\t\r\n\t\tbreak;\r\n\t}\r\n\t\r\n}\r\n\r\nfunction removeOptions(selectbox) {\r\n    var i;\r\n    for(i=selectbox.options.length-1;i&gt;=0;i--)\r\n    {\r\n        selectbox.remove(i);\r\n    }\r\n}\r\n\r\nfunction generateOption(text) {\r\n\tvar option=document.createElement(\"option\");\r\n\toption.text = text;\r\n\treturn option;\r\n} \r\n\/\/--&gt;\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Das ist erstmal eine Menge Code, den gehen wir mal im Detail durch:<\/p>\n<pre>var selectStadt = document.getElementById(\"selectStadt\");\r\nvar index = selectStadt.selectedIndex;\r\n<\/pre>\n<p>Hier holen wir uns die Referenz auf die Combo-Box mit den Namen &#8222;selectStadt&#8220; und dann im zweiten Schritt holen wir uns den ausgew\u00e4hlten Index. Das ist die Nummer des Eintrags. Wie immer in der Informatik hat der erste Eintrag die Nummer 0.<\/p>\n<p>Im zweiten Schritt holen wir uns die Referenz auf die Combo-Box &#8222;selectHotel&#8220;.<\/p>\n<pre>var selectHotel = document.getElementById(\"selectHotel\");<\/pre>\n<p>Wir l\u00f6schen nun alle Eintr\u00e4ge dieser Combo-Box, in dem wir die fertige Funktion &#8222;removeOptions&#8220; aufrufen:<\/p>\n<pre>removeOptions(selectHotel);<\/pre>\n<p>Nun werden die richtigen Elemente je nach Auswahl hinzugef\u00fcgt:<\/p>\n<pre>case 0: \/\/ erste option\r\n\tselectHotel.add(generateOption(\"Hotel Kiwi\"), null);\t\r\n\tselectHotel.add(generateOption(\"Hotel Spreewald\"), null);\t\r\nbeak;\r\n<\/pre>\n<p>F\u00fcr jeden Index legen wir einen derarigen Abschnitt an. Dies ist f\u00fcr die erste Option der Combo-Box &#8222;Hotel&#8220;. Dort f\u00fcgen wir jeweils einen Eintrag hinzu:<\/p>\n<pre>selectHotel.add(generateOption(\"Hotel Kiwi\"), null);<\/pre>\n<p>Jetzt sind wir fast am Ziel, nur beim ersten Aufruf stimmt die Auswahl noch nicht. Dies liegt daran, dass unsere Funktion nur aufgerufen wird, wenn der Benutzer eine Auswahl t\u00e4tigt. Deshalt m\u00fcssen wir beim Laden der Seite unsere Funktion &#8222;changeSelect&#8220; einmal aufrufen.<\/p>\n<p>Dazu f\u00fcgen wir dem Body-Tag einen entsprechenden Aufruf hinzu:<\/p>\n<pre>&lt;body onLoad=\"changeSelect()\"&gt;<\/pre>\n<p>Im DA-FormMaker Formular, gibt es bereits eine Funktion die aufgerufen wird, hier f\u00fcgen wir den &#8222;changeSelect&#8220;-Aufruf einfach hinzu:<\/p>\n<pre>&lt;body onLoad=\"SetCookieValues();changeSelect()\"&gt;<\/pre>\n<p>Das wars. Viel Spa\u00df und Erfolg beim Erweitern des Beispielformulars.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Download_Beispiel\"><\/span>Download Beispiel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a class=\"fasc-button fasc-size-medium fasc-type-flat fasc-ico-before dashicons-admin-site\" style=\"background-color: #33809e; color: #ffffff;\" href=\"\/wp-custom\/combobox\/formular.htm.zip\">Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Nehmen wir an, wir haben ein Formular mit zwei Combo-Boxen. W\u00e4hlt man einen Eintrag in der Ersten aus, soll sich<\/p>\n","protected":false},"author":1,"featured_media":217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15],"tags":[18,44],"class_list":["post-215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-formular","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/217"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}