{"id":219,"date":"2018-03-18T18:48:13","date_gmt":"2018-03-18T17:48:13","guid":{"rendered":"http:\/\/test.ekiwi.de\/?p=219"},"modified":"2018-03-18T18:48:13","modified_gmt":"2018-03-18T17:48:13","slug":"dropdown-ueber-url-steuern","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/","title":{"rendered":"Dropdown \u00fcber URL steuern"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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\/219\/dropdown-ueber-url-steuern\/#Videoanleitung\" >Videoanleitung<\/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\/219\/dropdown-ueber-url-steuern\/#Anleitung\" >Anleitung<\/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\/219\/dropdown-ueber-url-steuern\/#Beispiel_1_Index_des_Elements_auswaehlen\" >Beispiel 1: Index des Elements ausw\u00e4hlen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/#Beispiel_2_Anhand_des_Optionswertes_auswaehlen\" >Beispiel 2: Anhand des Optionswertes ausw\u00e4hlen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/#Beispiel_3_Auswahl_anhand_des_Wertes\" >Beispiel 3: Auswahl anhand des Wertes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/#Auswahl_beim_Aufruf_der_Seite\" >Auswahl beim Aufruf der Seite<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/#Einbinden_im_DA-FormMaker\" >Einbinden im DA-FormMaker<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ekiwi.de\/index.php\/219\/dropdown-ueber-url-steuern\/#Download_des_Beispiels\" >Download des Beispiels<\/a><\/li><\/ul><\/nav><\/div>\n<p>In diesem Tutorial soll es darum gehen, wie wir in einer HTML-Datei mit Formular Elemente in Auswahlboxen und Dropdowns ausw\u00e4hlen k\u00f6nnen. Der entsprechende Parameter kommt hierbei von der URL.<\/p>\n<p>Somit kann f\u00fcr den Benutzer bereits eine Vorauswahl im Formular stattfinden, je nachdem welchen Link er anklickt.<\/p>\n<p><!--more--><\/p>\n<p>Hier ein Beispiel:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/dropdown1.png\" alt=\"\" width=\"417\" height=\"271\" class=\"alignnone size-full wp-image-220\" srcset=\"\/wp-content\/uploads\/2018\/03\/dropdown1.png 417w, \/wp-content\/uploads\/2018\/03\/dropdown1-300x195.png 300w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Videoanleitung\"><\/span>Videoanleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/gVvb1fmgThs\" frameborder=\"0\" gesture=\"media\" allowfullscreen><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anleitung\"><\/span>Anleitung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Parameter k\u00f6nnen mittels URL an eine Seite \u00fcbergeben werden, Scriptsprache wie PHP k\u00f6nnen diese sehr leicht auslesen. In Java-Script geht dies nicht so leicht. Hier f\u00fcr haben wir zuerst eine kleine Zusatzfunktion:<\/p>\n<pre>\r\nfunction getQueryVariable(variable) \r\n{\r\n  var query = window.location.search.substring(1);\r\n  var vars = query.split(&quot;&amp;&quot;);\r\n  for (var i=0;i&lt;vars.length;i++) \r\n  {\r\n    var pair = vars[i].split(&quot;=&quot;);\r\n    if (pair[0] == variable) {\r\n      return pair[1];\r\n    }\r\n  }   \r\n}\r\n<\/pre>\n<p>Anschlie\u00dfend k\u00f6nnen wir einen URL-Parameter auslesen:<\/p>\n<pre>var optionName = getQueryVariable(\"option\");<\/pre>\n<p>Dies liest und dann z.B. aus der URL:<\/p>\n<pre>https:\/\/ekiwi.de\/meineseite.html?option=kiwi<\/pre>\n<p>den Wert <code>kiwi<\/code> aus und weist ihn der Variable <code>optionName<\/code> zu.<\/p>\n<p>Sofern der Wert des Parameters auch Leer- und Sonderzeichen enthalten kann, sollten wir diese dekodieren:<\/p>\n<pre>optionName = decodeURI(optionName);<\/pre>\n<hr>\n<h2><span class=\"ez-toc-section\" id=\"Beispiel_1_Index_des_Elements_auswaehlen\"><\/span>Beispiel 1: Index des Elements ausw\u00e4hlen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nun kann es los gehen. Im ersten Beispiel wollen wir die Nummer des Eintrags vorgeben. Unser Dropdown sieht so aus:<\/p>\n<pre>\r\n&lt;select name=&quot;Stadt&quot; id=&quot;selectStadt&quot; size=&quot;1&quot; onchange=&quot;changeSelect()&quot;&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>Wenn wir die Datei so aufrufen: <code>http:\/\/ekiwi.de\/formular.html?stadt=1<\/code> soll &#8222;Buchloe&#8220; ausgew\u00e4hlt werden. Die Nummerierung beginnt hier bei 0, deswegen ist 1 das zweite Element.<\/p>\n<p>Dies geht nun mit folgendem Code:<\/p>\n<pre>\r\nvar stadtIndex = getQueryVariable(\"stadt\");\t\r\nif (stadtIndex !== undefined)\r\n{\r\n\tdocument.getElementById(\"selectStadt\").selectedIndex = stadtIndex;\r\n}\r\n<\/pre>\n<p>Sofern der URL-Parameter \u00fcbergeben wird, wird das entsprechende Element ausgew\u00e4hlt.<\/p>\n<hr>\n<h2><span class=\"ez-toc-section\" id=\"Beispiel_2_Anhand_des_Optionswertes_auswaehlen\"><\/span>Beispiel 2: Anhand des Optionswertes ausw\u00e4hlen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Unser Dropdown hat wieder drei Elemente:<\/p>\n<pre>\r\n&lt;select name=&quot;Option1&quot; id=&quot;selectOption&quot; size=&quot;1&quot;&gt;\r\n\t&lt;option&gt;Option1&lt;\/option&gt;\r\n\t&lt;option&gt;Option2&lt;\/option&gt;\r\n\t&lt;option&gt;Option3&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n<\/pre>\n<p>Diesmal wollen wir die Beschriftung der Option verwenden, d.h. beim Aufruf von <code>https:\/\/ekiwi.de\/formular.html?option=Option2<\/code> soll die zweite Option ausgew\u00e4hlt werden. Geben wir <code>Option3<\/code> an, dann das dritte Element.<\/p>\n<p>Unser Java-Script-Code wird dabei etwas komplexer:<\/p>\n<pre>\r\nvar optionName = getQueryVariable(\"option\");\r\noptionName = decodeURI(optionName);\r\nif (optionName !== undefined)\r\n{\r\n\tvar s = document.getElementById(\"selectOption\");\r\n\r\n\tfor ( var i = 0; i < s.options.length; i++ ) \r\n\t{\r\n    \tif ( s.options[i].text == optionName ) \r\n    \t{\r\n        \ts.options[i].selected = true;\r\n        \tbreak;\r\n        }\r\n   \t}    \r\n}<\/pre>\n<p>In diesem Beispiel lesen wir wieder den URL-Parameter aus. Anschlie\u00dfend selektieren wir das Dropdown und gehen mir der Schleife \u00fcber alle Elemente des Dropdowns. Stimmt die Beschriftung mit dem Parameter \u00fcberein, wird das Element ausgew\u00e4hlt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beispiel_3_Auswahl_anhand_des_Wertes\"><\/span>Beispiel 3: Auswahl anhand des Wertes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im letzten Beispiel sieht unser Dropdown etwas anders aus:<\/p>\n<pre>\r\n&lt;select name=&quot;Option&quot; id=&quot;selectOption&quot; size=&quot;1&quot;&gt;\r\n\t&lt;option value=&quot;option1&quot;&gt;Die erste Option&lt;\/option&gt;\r\n\t&lt;option value=&quot;option2&quot;&gt;Die zweite Option&lt;\/option&gt;\r\n\t&lt;option value=&quot;option3&quot;&gt;Die dritte und letzte Option&lt;\/option&gt;\r\n&lt;\/select&gt;\r\n<\/pre>\n<p>Jeder Option ist noch ein Wert zugewiesen. Jetzt wollen wir statt der Beschriftung, die Auswahl \u00fcber den Wert machen. Dies geschieht mit fast dem gleichen Code wie oben, nur eine Zeile \u00e4ndern wir ab:<\/p>\n<pre>if ( s.options[i].value == optionName2 )<\/pre>\n<p>Statt <code>.text<\/code> wird hier der Wert, also <code>.value<\/code> verglichen.<\/p>\n<hr>\n<h2><span class=\"ez-toc-section\" id=\"Auswahl_beim_Aufruf_der_Seite\"><\/span>Auswahl beim Aufruf der Seite<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im letzten Schritt wollen wir die Auswahl nun beim Aufruf der Seite setzen. Bislang macht unser Code noch nichts, da er nicht aufgerufen wird. Hierzu f\u00fcgen wir dem <code>&lt;body&gt;<\/code> Tag eine <code>onload<\/code> Funktion hinzu:<\/p>\n<pre>&lt;body onLoad=&quot;changeSelect()&quot;&gt;<\/pre>\n<p>Anschlie\u00dfend implementieren wir die <code>changeSelect()<\/code>-Methode:<\/p>\n<pre>\r\n\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\t\r\nfunction getQueryVariable(variable) \r\n{\r\n  var query = window.location.search.substring(1);\r\n  var vars = query.split(&quot;&amp;&quot;);\r\n  for (var i=0;i&lt;vars.length;i++) \r\n  {\r\n    var pair = vars[i].split(&quot;=&quot;);\r\n    if (pair[0] == variable) {\r\n      return pair[1];\r\n    }\r\n  }   \r\n}\r\n\r\nfunction changeSelect()\r\n{\t\r\n\t\/\/Beispiel 1 -&gt; wir verwenden den Index der Liste\r\n\tvar stadtIndex = getQueryVariable(&quot;stadt&quot;);\t\r\n\tif (stadtIndex !== undefined)\r\n\t{\r\n\t\tdocument.getElementById(&quot;selectStadt&quot;).selectedIndex = stadtIndex;\r\n\t}\r\n\r\n\t\/\/Beispiel 2 -&gt; wir verwenden die Beschriftung der Option\r\n\tvar optionName = getQueryVariable(&quot;option&quot;);\r\n\toptionName = decodeURI(optionName);\r\n\tif (optionName !== undefined)\r\n\t{\r\n\t\tvar s = document.getElementById(&quot;selectOption&quot;);\r\n\r\n\t\tfor ( var i = 0; i &lt; s.options.length; i++ ) \r\n\t\t{\r\n        \tif ( s.options[i].text == optionName ) \r\n        \t{\r\n            \ts.options[i].selected = true;\r\n            \tbreak;\r\n            }\r\n       \t}    \r\n    }\r\n}\t\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Beim Aufruf der Seite werden nun die Parameter aus der URL ausgelesen und die Dropdowns entsprechend gesetzt. Nat\u00fcrlich kann man auch mehrere Drowndowns setzen:<\/p>\n<pre>&lt;a href=&quot;formular.htm?stadt=1&amp;option=Option2&amp;option2=option3&quot;&gt;Auswahl treffen&lt;\/a&gt;<\/pre>\n<hr>\n<h2><span class=\"ez-toc-section\" id=\"Einbinden_im_DA-FormMaker\"><\/span>Einbinden im DA-FormMaker<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der hier gezeigte Code l\u00e4sst sich auf im DA-FormMaker nutzen und direkt in das Formular abspeichern. Hier wird das HTML-Template in den \"Erweiterten Einstellungen\" bearbeitet:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/03\/einfuegen.gif\" alt=\"\" width=\"500\" height=\"404\" class=\"alignnone size-full wp-image-221\" \/><\/p>\n<hr>\n<h2><span class=\"ez-toc-section\" id=\"Download_des_Beispiels\"><\/span>Download des Beispiels<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"\/wp-content\/uploads\/2018\/03\/tutorial_dropdown.zip\">Download des Beispiels<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In diesem Tutorial soll es darum gehen, wie wir in einer HTML-Datei mit Formular Elemente in Auswahlboxen und Dropdowns ausw\u00e4hlen<\/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":[45,46,4,44],"class_list":["post-219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-dropdown","tag-formulare","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/219","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=219"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/219\/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=219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}