Создать динамический выпадающий список - PullRequest
0 голосов
/ 28 января 2011

Я уже некоторое время ищу интернет, чтобы найти правильное решение, но пока не добился успеха.

Чего я добиваюсь: я создаю динамический выпадающий список с провинциями.Как только пользователь выбирает одну из динамически создаваемых записей, во втором динамическом раскрывающемся списке для округов должны отображаться только правильные записи в зависимости от выбранной провинции.

Для этого я построил следующий код:

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].");
           }
       ?>\"; 
  } 

Поэтому мне нужно получить счетчик $ i из первой части PHP в функцию 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 Пном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;

После этого яиспользуйте функцию "dyndr"pdwn.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], но не смог найти ошибку ... Вы понимаете, почему она не работает так, как я это делаю?

Результат выглядит в настоящее время так:

<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 Ответ

2 голосов
/ 21 февраля 2011

К сожалению, описанный выше подход не будет работать.Когда вы используете php внутри сегмента javascript, вы должны помнить, что код php будет оцениваться, когда файл, содержащий javascript, запрашивается только с сервера.Все, что PHP-код выведет во время запроса (например, с помощью команды 'echo'), станет частью вашей функции javascript.В приведенном выше случае вы ничего не выводили, поэтому ваш код javascript будет по существу читать .innerHTML=\" \"; после загрузки страницы.Даже если вы выводите данные туда, они не будут динамическими.

На мой взгляд, у вас есть 3 варианта:

  1. Используйте AJAX для загрузки HTML-кода длявторой выпадающий из файла php.Это, безусловно, путь, если вы уже знакомы с AJAX, но в противном случае это может быть немного сложнее.Если вы не знакомы, я бы определенно рекомендовал пройти несколько уроков, прежде чем пытаться реализовать эту опцию.

  2. Перезагрузить страницу, когда пользователь меняет первый выпадающий список, и использоватьпараметр строки запроса, чтобы сообщить вашему сценарию PHP, какая провинция была выбрана.Это, вероятно, не очень хороший вариант, особенно если эта пара раскрывающихся списков является частью более крупной формы, в которую пользователь, возможно, уже ввел некоторые данные.

  3. Пусть ваш PHP выведетHTML для первого раскрывающегося списка, а затем отдельный раскрывающийся список для каждой провинции, в котором перечислены соответствующие районы.(Таким образом, если у вас есть 10 провинций, вы должны создать всего 11 выпадающих списков.) Затем вы будете использовать стиль CSS display: none;, чтобы скрыть дополнительные выпадающие списки, и использовать javascript, чтобы переключить их стиль на display: inline-block;.Эта опция не идеальна для большого количества опций, потому что вы загружаете тонны потенциально ненужных данных.

Из любопытства, почему вы храните данные провинции в пользовательском $_SESSIONпеременная?Обычно я пытаюсь зарезервировать их для пользовательских данных или информации, относящейся к состоянию интерфейса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...