创建动态下拉列表

时间:2011-01-28 05:00:58

标签: php javascript html dynamic drop-down-menu

我现在正在网上搜索相当长的一段时间才找到合适的解决方案,但到目前为止我还没有成功。

我尝试实现的目标:我创建了一个包含省份的动态下拉框。一旦用户选择其中一个动态创建的条目,区域的第二个动态下拉框应该只显示正确的条目,具体取决于所选的省。

因此我构建了以下代码:

的search.php

//$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 < $countProvinces; $i++) {

   echo "<option value=".$_SESSION['provincesresults'][$i][0]." onClick=\"removeSelected(\".$i.\")\">".$_SESSION['provincesresults'][$i][1]."</option>";
}

在search.php的正文部分,我有以下JavaScript代码,当我按onClick选择上面生成的选项之一时,它将被执行:

<!--Javascript which is needed to call the dynamic_drop_down.php function per onClick event-->
<script type=\"text/javascript\"> 
  function removeUnselected($key){
      document.getElementById(\"php_code\").innerHTML=\"
        <?php  

           //Get all the values out of the district array out of pdo.vhd
           $districtsSelected = removeUnselected(".$_SESSION['provincesresults'][$key][0].");
           }
       ?>\"; 
  } 

所以我需要从第一个PHP部分中获取$ i计数器到Javascript函数中。 在那之后,我需要填充的$ districtsSelected以便在我的search.php中进一步使用

php函数removeUnselected(“。$ _ SESSION ['provincesresults'] [$ key] [0]。”);看起来像这样,并包含在search.php中:

<?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 < 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);
}
?>

对于如何以工作方式构建此内容的任何建议都非常感谢!

谢谢你,问候,

codac

编辑: 我使用以下JavaScript: http://www.mattkruse.com/javascript/dynamicoptionlist/index.html

我现在有两个问题: 由于有24个省,86个区,1600个公社和13500个村庄,所以创建下拉框需要几秒钟。

表格如下(省份):

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 

(区)     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

......同样适用于公社和村庄。

我通过以下方式从Microsoft SQL Server中获取值:

 $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";

......同样适用于公社和村庄。

就像我在评论中提到的那样,我将这些值存储在$ _SESSION:

$_SESSION["provincesresults"]=$provincesResults;
$_SESSION["districtsresults"]=$districtsResults;

之后我使用函数“dyndrpdwn.php”生成下拉列表:

<?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 = "<script type=\"text/javascript\">
                   var makeGeo = new DynamicOptionList(\"provinces\",\"districts\",\"communes\",\"villages\");";

   //Loop through all Provinces
   for($i = 0; $i < $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 < $countDistricts && $_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 < $countCommunes && $_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 < $countVillages && $_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."</script>";

   //Return the result
   return sprintf($returnPDCV);
}
?>

为了使用JavaScript,我在patient_update.php中使用以下代码:

//include the dynamic drop down generator
include("/functions/dyndrpdwn.php");

<!--Adding JavaScript for dynamic dropdown list-->
<script type=\"text/javascript\" src=\"/js/dynamicoptionlist.js\"></script>

//Call the dynamic drop down function
echo dyndrpdwn();

echo"<!--Province Create Drop-Down Field-->
     <select name=\"provinces\" class =\"dropdown\">";

//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" && $_GET["value"] == "receive" || isset($_SESSION["provincesresults"]) == "true" && count($_SESSION["provincesresults"]) > 0) {

   //Get all the values out of the Province array out of pdo.vhd

$ countProvinces = count($ _ SESSION [“provincesresults”]);

   for($i=0; $i < $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"<option value=".$_SESSION["provincesresults"][$i][1]." SELECTED>";
               }
               else {

                  echo"<option value=".$_SESSION["provincesresults"][$i][1].">";
               }

               echo"".$_SESSION["provincesresults"][$i][2]."
                  </option>";
               break;

            case "khmer":

               if($_SESSION["provincesresults"][$i][2] == $_SESSION["searchresultspmd"][0][5]) {

                  echo"<option value=".$_SESSION["provincesresults"][$i][1]." SELECTED>";
               }
               else {

                  echo"<option value=".$_SESSION["provincesresults"][$i][1].">";
               }

               echo"".$_SESSION["provincesresults"][$i][3]."
                  </option>";
               break;
         }
      }
   }
}

echo"          </select>
            </td>
            <td>

               <!--District Create Drop-Down Field-->
               <select name=\"districts\" class =\"dropdown\">
                  <script type=\"text/javascript\">
                     makeGeo.printOptions(\"districts\")
                  </script>
               </select>
            </td>
            <td>

               <!--Commune Create Drop-Down Field-->
               <select name=\"communes\" class =\"dropdown\">
                  <script type=\"text/javascript\">
                     makeGeo.printOptions(\"communes\")
                  </script>
               </select>
            </td>
            <td>

               <!--Village Create Drop-Down Field-->
               <select name=\"villages\" class =\"dropdown\">
                  <script type=\"text/javascript\">
                     makeGeo.printOptions(\"villages\")
                  </script>
               </select> 
            </td>

...

现在有两个问题:

  1. 调用dyndrpdwn.php函数需要几秒钟,因为有大约24个省,~86个区,~1600个公社和~13500个村庄,我循环使用它们。有什么方法可以改善性能吗?
  2. 使用setDefaultOptions我尝试为正确的下拉列表设置默认值。但在我的代码中,它不起作用。我把它与[JavaScript网站] [1]上的例子进行了比较,但我找不到错误......你能不能理解为什么它不像我那样工作?
  3. 目前结果如下:

    <script type="text/javascript">
    var makeGeo = new DynamicOptionList("provinces","districts","communes","villages");
    

    这将为省和地区创建条目:

    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");
    

    这将创建公社的条目

    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");
    

    这将创建村庄的条目:

    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");
    

    这应该设置省,区和公社的默认值(只有3个例子;到目前为止它们不起作用......):

    makeGeo.forValue("240000").setDefaultOptions("Boeng Trakuon");
    makeGeo.forValue("240200").setDefaultOptions("Ou Andoung");
    makeGeo.forValue("240204").setDefaultOptions("Boeng Trakuon");</script>
    
    <!--Province Create Drop-Down Field-->
    <select name="provinces" class ="dropdown">
       <option value=010000>Banteay Mean Chey
       </option><option value=020000>Bat Dambang
       </option><option value=030000>Kampong Cham
       </option><option value=040000>Kampong Chhnang
       </option><option value=050000>Kampong Spueu
       </option><option value=060000>Kampong Thum
       </option><option value=070000>Kampot
       </option><option value=080000>Kandal
       </option><option value=090000>Kaoh Kong
       </option><option value=100000>Kracheh
       </option><option value=110000>Mondol Kiri
       </option><option value=120000>Phnom Penh
       </option><option value=130000>Preah Vihear
       </option><option value=140000>Prey Veaeng
       </option><option value=150000>Pousat
       </option><option value=160000>Rotanak Kiri
       </option><option value=170000>Siem Reab
       </option><option value=180000>Krong Preah Sihanouk
       </option><option value=190000>Stueng Traeng
       </option><option value=200000>Svay Rieng
       </option><option value=210000>Takaev
       </option><option value=220000>Otdar Mean Chey
       </option><option value=230000>Krong Kaeb
       </option><option value=240000 SELECTED>Krong Pailin
       </option></select>
    
       </td>
       <td>
    
          <!--District Create Drop-Down Field-->
          <select name="districts" class ="dropdown">
             <script type="text/javascript">
                makeGeo.printOptions("districts")
             </script>
          </select>
       </td>
       <td>
    
          <!--Commune Create Drop-Down Field-->
          <select name="communes" class ="dropdown">
             <script type="text/javascript">
                makeGeo.printOptions("communes")
             </script>
          </select>
       </td>
       <td>
    
          <!--Village Create Drop-Down Field-->
          <select name="villages" class ="dropdown">
             <script type="text/javascript">
                makeGeo.printOptions("villages")
             </script>
          </select> 
       </td>
    

    我知道要查看相当多的内容,对不起,非常感谢我们的帮助!

1 个答案:

答案 0 :(得分:2)

不幸的是,您在上面概述的方法不起作用。当你在javascript段中使用php时,你必须记住,当只从服务器请求包含javascript的文件时,将评估php代码。 PHP代码在请求期间输出的任何内容(例如通过'echo'命令)将成为您的javascript函数的一部分。在上面的情况中,您没有输出任何内容,因此一旦页面加载,您的javascript代码将基本上读取.innerHTML=\" \";。即使你在那里输出数据,它也不会是动态的。

在我看来,你有3个选择:

  1. 使用AJAX从php文件加载第二个下拉列表的HTML。如果您已经熟悉AJAX,这绝对是可行的方法,但是否则可能有点棘手。如果您不熟悉,我建议您在尝试实施此选项之前先阅读一些教程。

  2. 当用户更改第一个下拉列表时重新加载页面,并使用查询字符串参数告诉PHP脚本选择了哪个省。这可能不是一个很好的选择,特别是如果这对下拉列表是用户可能已经输入一些数据的更大形式的一部分。

  3. 让您的PHP输出第一个下拉列表的HTML,然后为列出其各自区域的每个省份单独下拉。 (因此,如果您有10个省,则总共会产生11个下降。)然后,您将使用CSS样式display: none;隐藏辅助下拉菜单并使用javascript将其样式切换为display: inline-block;。此选项不适用于大量选项,因为您正在加载大量可能不必要的数据。

  4. 出于好奇,为什么要将省数据存储在用户的$_SESSION变量中?我通常会尝试为用户特定的数据或与接口状态有关的信息保留该信息。