Databases
StackOverflow2013
Postsdbo
POCreate dynamic Drop Down List
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate dynamic Drop Down List
    text
    copied!<p>I'm searching the internet now for quite some time to find a proper solution but I was not successful so far.</p> <p>What I try to achieve: I create a dynamic drop down box with provinces. As soon as the user selects one of the dynamic created entries, a second dynamic drop down box for districts should only display the proper entries depending on the selected province.</p> <p>Therefor I have build the following code:</p> <p>search.php</p> <pre><code>//$i is running up to the max amount of provinces //for each province there shall be one option in the html select //the session array provinceresults contains key1, key2, province (english), province (other language) for($i=0; $i &lt; $countProvinces; $i++) { echo "&lt;option value=".$_SESSION['provincesresults'][$i][0]." onClick=\"removeSelected(\".$i.\")\"&gt;".$_SESSION['provincesresults'][$i][1]."&lt;/option&gt;"; } </code></pre> <p>In the body part of the search.php I have the following JavaScript code which shall get executed when I select one of the above generated options per onClick:</p> <pre><code>&lt;!--Javascript which is needed to call the dynamic_drop_down.php function per onClick event--&gt; &lt;script type=\"text/javascript\"&gt; function removeUnselected($key){ document.getElementById(\"php_code\").innerHTML=\" &lt;?php //Get all the values out of the district array out of pdo.vhd $districtsSelected = removeUnselected(".$_SESSION['provincesresults'][$key][0]."); } ?&gt;\"; } </code></pre> <p> </p> <p>So I need do get the $i counter out of the first PHP part into the Javascript function. After that I need the filled $districtsSelected for further use in my search.php</p> <p>The php function removeUnselected(".$_SESSION['provincesresults'][$key][0]."); looks like this and is included in the search.php:</p> <pre><code>&lt;?php /** *This php file is used to retrieve the districts for a selected province. *This file is called by search.php. *As input, the function needs to be called with the ID of the selected province, it will return all related districts. */ function removeUnselected($provinceKey) { //Build the array which returns the needed districts $districtsSelected = array(); //Loop through all the districts that have been read out of the database by get_value_help.php for($i = 0; $i &lt; count($_SESSION['districtsresults']); $i++) { //Check if the province id out of the table dbo.vhp matches with the id out of the table dbo.vhd if(strcmp($provinceKey, $_SESSION['districtsresults'][$i][1]) == 0) { //Give back the district names in english if the language settings are english if($_SESSION['lng'] == "english") { //Remove any districts that were not selected $districtsSelected[] = $_SESSION['districtsresults'][$i][2]; } //Give back the district names in khmer if the language settings are khmer elseif ($_SESSION['lng'] == "khmer") { //Remove any districts that were not selected $districtsSelected[] = $_SESSION['districtsresults'][$i][3]; } } } //Return the result return($districtsSelected); } ?&gt; </code></pre> <p>Any suggestions on how I can build this in a working way are highly appreciated!</p> <p>Thank you and regards,</p> <p>codac</p> <p>EDIT: I am using the following JavaScript: <a href="http://www.mattkruse.com/javascript/dynamicoptionlist/index.html" rel="nofollow">http://www.mattkruse.com/javascript/dynamicoptionlist/index.html</a></p> <p>I have two problems now: As there are 24 Provinces, 86 Districts, 1600 Communes and 13500 Villages, creating for drop-down boxes takes several seconds.</p> <p>The tables look like this (Provinces):</p> <pre><code>country_id province_id province_en province_kh 000000 010000 Banteay Mean Chey Khmer 1 000000 020000 Bat Dambang Khmer 2 000000 030000 Kampong Cham Khmer 3 000000 040000 Kampong Chhnang Khmer </code></pre> <p>(districts) province_id district_id district_en district_kh 010000 010200 Mongkol Borei Khmer 1 010000 010300 Phnum Srok Khmer 2 010000 010400 Preah Netr Preah Khmer 3 010000 010500 Ou Chrov Khmer 4</p> <p>...same for communes and villages.</p> <p>I get the values out of the Microsoft SQL Server via:</p> <pre><code> $sqlProvinces = "SELECT country_id, province_id, province_en, province_kh FROM dbo.vhp"; $sqlDistricts = "SELECT province_id, district_id, district_en, district_kh FROM dbo.vhd"; </code></pre> <p>...same for communes and villages.</p> <p>Like mentioned in my comment, I store these values in a $_SESSION:</p> <pre><code>$_SESSION["provincesresults"]=$provincesResults; $_SESSION["districtsresults"]=$districtsResults; </code></pre> <p>After that I use the function "dyndrpdwn.php" to generate the drop down list:</p> <pre><code>&lt;?php function dyndrpdwn() { //count the number of provinces, districts, communes and villages for the counters of the for-statements $countProvinces = count($_SESSION["provincesresults"]); $countDistricts = count($_SESSION["districtsresults"]); $countCommunes = count($_SESSION["communesresults"]); $countVillages = count($_SESSION["villagesresults"]); //NULL the return values $returnPD = NULL; $returnC = NULL; $returnV = NULL; $defaultP = NULL; $defaultD = NULL; $defaultC = NULL; $defaultV = NULL; //Set start value for the counters to 0 $j = 0; $k = 0; $l = 0; //Start the JavaScript and create the DynamitOptionList $returnPD = "&lt;script type=\"text/javascript\"&gt; var makeGeo = new DynamicOptionList(\"provinces\",\"districts\",\"communes\",\"villages\");"; //Loop through all Provinces for($i = 0; $i &lt; $countProvinces; $i++) { //Create the optionlist for provinces $returnPD = $returnPD."makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").addOptionsTextValue("; //Create the optionlist for districts ("while" if more performant than "for"!) and make sure that counter is not getting out of index while($j &lt; $countDistricts &amp;&amp; $_SESSION["provincesresults"][$i][1] == $_SESSION["districtsresults"][$j][0]) { $returnPD = $returnPD."\"".$_SESSION["districtsresults"][$j][2]."\",\"".$_SESSION["districtsresults"][$j][1]."\","; $returnC = $returnC."makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").forValue(\"".$_SESSION["districtsresults"][$j][1]."\").addOptionsTextValue("; //Create the optionlist for communes ("while" if more performant than "for"!) and make sure that counter is not getting out of index while($k &lt; $countCommunes &amp;&amp; $_SESSION["districtsresults"][$j][1] == $_SESSION["communesresults"][$k][0]) { $returnC = $returnC."\"".$_SESSION["communesresults"][$k][2]."\",\"".$_SESSION["communesresults"][$k][1]."\","; $returnV = $returnV."makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").forValue(\"".$_SESSION["districtsresults"][$j][1]."\").forValue(\"".$_SESSION["communesresults"][$k][1]."\").addOptionsTextValue("; //Create the optionlist for villages ("while" if more performant than "for"!) and make sure that counter is not getting out of index while($l &lt; $countVillages &amp;&amp; $_SESSION["communesresults"][$k][1] == $_SESSION["villagesresults"][$l][0]) { $returnV = $returnV."\"".$_SESSION["villagesresults"][$l][2]."\",\"".$_SESSION["villagesresults"][$l][1]."\","; //Set the Default Value $defaultV = "makeGeo.forValue(\"".$_SESSION["communesresults"][$k][1]."\").setDefaultOptions(\"".$_SESSION["searchresultspmd"][0][8]."\");"; //Increase the counter by 1 $l++; } //Cut the last "," of the string after the last value of $returnC $returnV = substr($returnV, 0, -1); //Close the JavaScript statement $returnV = $returnV.");"; //If there is no village for the commune, remove the already prepared string "makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").forValue(\"".$_SESSION["districtsresults"][$j][1]."\").forValue(\"".$_SESSION["communesresults"][$k][1]."\").addOptionsTextValue(" if(substr($returnV,-21) == "addOptionsTextValue);") { $returnV = substr($returnV, 0, -86); } //Set the Default Value $defaultC = "makeGeo.forValue(\"".$_SESSION["districtsresults"][$j][1]."\").setDefaultOptions(\"".$_SESSION["searchresultspmd"][0][7]."\");"; //Increase the counter by 1 $k++; } //Cut the last "," of the string after the last value of $returnC $returnC = substr($returnC, 0, -1); //Close the JavaScript statement $returnC = $returnC.");"; //If there is no commune for the district, remove the already prepared string "makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").forValue(\"".$_SESSION["districtsresults"][$j][1]."\").addOptionsTextValue(" if(substr($returnC,-21) == "addOptionsTextValue);") { $returnC = substr($returnC, 0, -66); } //Set the Default Value $defaultD = "makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").setDefaultOptions(\"".$_SESSION["searchresultspmd"][0][8]."\");"; //Increase the counter by 1 $j++; } //Cut the last "," of the string after the last value of $returnPD $returnPD = substr($returnPD, 0, -1); //Close the JavaScript statement $returnPD = $returnPD.");"; //If there is no district for the province, remove the already prepared string "makeGeo.forValue(\"".$_SESSION["provincesresults"][$i][1]."\").addOptionsTextValue(" if(substr($returnPD,-21) == "addOptionsTextValue);") { $returnPD = substr($returnPD, 0, -47); } //Set the Default Value $defaultP = "makeGeo.forValue(\"provinces\").setDefaultOptions(\"".$_SESSION["provincesresults"][$i][1]."\");"; } //Put Provinces, Districts, Communes and Villages together and close the Javascript $returnPDCV = $returnPD.$returnC.$returnV.$defaultD.$defaultC.$defaultV."&lt;/script&gt;"; //Return the result return sprintf($returnPDCV); } ?&gt; </code></pre> <p>In order to use the JavaScript, I use the following code in the patient_update.php:</p> <pre><code>//include the dynamic drop down generator include("/functions/dyndrpdwn.php"); &lt;!--Adding JavaScript for dynamic dropdown list--&gt; &lt;script type=\"text/javascript\" src=\"/js/dynamicoptionlist.js\"&gt;&lt;/script&gt; //Call the dynamic drop down function echo dyndrpdwn(); echo"&lt;!--Province Create Drop-Down Field--&gt; &lt;select name=\"provinces\" class =\"dropdown\"&gt;"; //Fill the drop down, when data is received by get_value_help.php or if session array is already filled if(isset($_GET["value"]) == "true" &amp;&amp; $_GET["value"] == "receive" || isset($_SESSION["provincesresults"]) == "true" &amp;&amp; count($_SESSION["provincesresults"]) &gt; 0) { //Get all the values out of the Province array out of pdo.vhd </code></pre> <p>$countProvinces = count($_SESSION["provincesresults"]);</p> <pre><code> for($i=0; $i &lt; $countProvinces; $i++) { //Display the Khmer or the English language depending on the website settings. $_SESSION["searchresultspmd"][0][5]) = province_id in dbo.pmd //$_SESSION["provincesresults"][$i][1] = province_id in dbo.vhp if(isset($_SESSION["lng"]) == "true") { switch ($_SESSION["lng"]) { case "english": if($_SESSION["provincesresults"][$i][2] == $_SESSION["searchresultspmd"][0][5]) { echo"&lt;option value=".$_SESSION["provincesresults"][$i][1]." SELECTED&gt;"; } else { echo"&lt;option value=".$_SESSION["provincesresults"][$i][1]."&gt;"; } echo"".$_SESSION["provincesresults"][$i][2]." &lt;/option&gt;"; break; case "khmer": if($_SESSION["provincesresults"][$i][2] == $_SESSION["searchresultspmd"][0][5]) { echo"&lt;option value=".$_SESSION["provincesresults"][$i][1]." SELECTED&gt;"; } else { echo"&lt;option value=".$_SESSION["provincesresults"][$i][1]."&gt;"; } echo"".$_SESSION["provincesresults"][$i][3]." &lt;/option&gt;"; break; } } } } echo" &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--District Create Drop-Down Field--&gt; &lt;select name=\"districts\" class =\"dropdown\"&gt; &lt;script type=\"text/javascript\"&gt; makeGeo.printOptions(\"districts\") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--Commune Create Drop-Down Field--&gt; &lt;select name=\"communes\" class =\"dropdown\"&gt; &lt;script type=\"text/javascript\"&gt; makeGeo.printOptions(\"communes\") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--Village Create Drop-Down Field--&gt; &lt;select name=\"villages\" class =\"dropdown\"&gt; &lt;script type=\"text/javascript\"&gt; makeGeo.printOptions(\"villages\") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; </code></pre> <p>...</p> <p>So there are two questions now:</p> <ol> <li>Calling the dyndrpdwn.php function takes quite a few seconds, as there are ~24 Provinces, ~86 Districts, ~1600 Communes and ~13500 Villages and I loop through them. Is there any way how to improve the performance?</li> <li>With <code>setDefaultOptions</code> I try to set the Default Value for the proper drop-down list. But in my code it does not work. I've compared it with the examples on [the JavaScript website][1] but I couldn't find the error... Can you see why it is not working the way I do it?</li> </ol> <p>The result looks currently like that:</p> <pre><code>&lt;script type="text/javascript"&gt; var makeGeo = new DynamicOptionList("provinces","districts","communes","villages"); </code></pre> <p>This creates the entries for provinces and districts:</p> <pre><code>makeGeo.forValue("010000").addOptionsTextValue("Mongkol Borei","010200","Phnum Srok","010300","Preah Netr Preah","010400","Ou Chrov","010500","Serei Saophoan","010600","Thma Puok","010700","Svay Chek","010800","Malai","010900"); </code></pre> <p>This creates the entries for the communes</p> <pre><code>makeGeo.forValue("010000").forValue("010200").addOptionsTextValue("Banteay Neang","010201","Bat Trang","010202","Chamnaom","010203","Kouk Ballangk","010204","Koy Maeng","010205","Ou Prasat","010206","Phnum Touch","010207","Rohat Tuek","010208","Ruessei Kraok","010209","Sambuor","010210","Soea","010211","Srah Reang","010212","Ta Lam","010213"); </code></pre> <p>This creates the entries for the villages:</p> <pre><code>makeGeo.forValue("010000").forValue("010200").forValue("010201").addOptionsTextValue("Ou Thum","01020101","Phnum","01020102","Banteay Neang","01020103","Kouk Pnov","01020104","Trang","01020105","Pongro","01020106","Kouk Tonloab","01020107","Trabaek","01020108","Khile","01020109","Samraong Pen","01020110","Dang Run Lech","01020111","Dang Run Kaeut","01020112","Ou Snguot","01020113","Prey Changha Lech","01020114","Prey Changha Kaeut","01020115","Ou Andoung Lech","01020116","Ou Andoung Kandal","01020117","Ou Andoung Kaeut","01020118","Kouk Kduoch","01020119"); </code></pre> <p>And this should set the default value for the province, district and commune (just 3 examples; they don't work so far...):</p> <pre><code>makeGeo.forValue("240000").setDefaultOptions("Boeng Trakuon"); makeGeo.forValue("240200").setDefaultOptions("Ou Andoung"); makeGeo.forValue("240204").setDefaultOptions("Boeng Trakuon");&lt;/script&gt; &lt;!--Province Create Drop-Down Field--&gt; &lt;select name="provinces" class ="dropdown"&gt; &lt;option value=010000&gt;Banteay Mean Chey &lt;/option&gt;&lt;option value=020000&gt;Bat Dambang &lt;/option&gt;&lt;option value=030000&gt;Kampong Cham &lt;/option&gt;&lt;option value=040000&gt;Kampong Chhnang &lt;/option&gt;&lt;option value=050000&gt;Kampong Spueu &lt;/option&gt;&lt;option value=060000&gt;Kampong Thum &lt;/option&gt;&lt;option value=070000&gt;Kampot &lt;/option&gt;&lt;option value=080000&gt;Kandal &lt;/option&gt;&lt;option value=090000&gt;Kaoh Kong &lt;/option&gt;&lt;option value=100000&gt;Kracheh &lt;/option&gt;&lt;option value=110000&gt;Mondol Kiri &lt;/option&gt;&lt;option value=120000&gt;Phnom Penh &lt;/option&gt;&lt;option value=130000&gt;Preah Vihear &lt;/option&gt;&lt;option value=140000&gt;Prey Veaeng &lt;/option&gt;&lt;option value=150000&gt;Pousat &lt;/option&gt;&lt;option value=160000&gt;Rotanak Kiri &lt;/option&gt;&lt;option value=170000&gt;Siem Reab &lt;/option&gt;&lt;option value=180000&gt;Krong Preah Sihanouk &lt;/option&gt;&lt;option value=190000&gt;Stueng Traeng &lt;/option&gt;&lt;option value=200000&gt;Svay Rieng &lt;/option&gt;&lt;option value=210000&gt;Takaev &lt;/option&gt;&lt;option value=220000&gt;Otdar Mean Chey &lt;/option&gt;&lt;option value=230000&gt;Krong Kaeb &lt;/option&gt;&lt;option value=240000 SELECTED&gt;Krong Pailin &lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--District Create Drop-Down Field--&gt; &lt;select name="districts" class ="dropdown"&gt; &lt;script type="text/javascript"&gt; makeGeo.printOptions("districts") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--Commune Create Drop-Down Field--&gt; &lt;select name="communes" class ="dropdown"&gt; &lt;script type="text/javascript"&gt; makeGeo.printOptions("communes") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;!--Village Create Drop-Down Field--&gt; &lt;select name="villages" class ="dropdown"&gt; &lt;script type="text/javascript"&gt; makeGeo.printOptions("villages") &lt;/script&gt; &lt;/select&gt; &lt;/td&gt; </code></pre> <p>I know its quite a lot of stuff to look through, sorry for that butevery help is highly appreciated!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload