2015-03-03 29 views
0

今天,我开始编写一个包含Dynamic dropwdown列表的表单。AJAX PHP:使用AJAX动态下拉列表

任务:我想在用户选择类别时制作动态下拉列表,那么将出现具有该类别的商店。

它的形式是:

<select name="category" class="form-control" id="category" onchange="ajaxStore(this.value)"> 
    <option value="-1"> - Choose Category -</option> 
     <?php 
      $StoreCategoriesAPIAccessor = new StoreCategoriesAPIService(GuzzleClient::getClient()); 
      $stores = $StoreCategoriesAPIAccessor->getStoreCategories(); 
      foreach ($stores as $store):  
     ?> 
    <option value="<?php echo $store->getStoreCategoryId(); ?>"><?php echo $store->getCategory(); ?></option> 
     <?php endforeach; ?> 
</select> 

<label for="inputName" class="control-label">Store Name</label> 
    <select name="store" class="form-control" id="store"> 
    <option value="-1"> - Choose Store -</option> 
    </select> 

这是AJAX:

<!-- linking drop down AJAX --> 
    <script type="text/javascript"> 
     var ajaxku=buatajax(); 
     function ajaxStore(id){ 
     var url="objects/StoreAPIService.php?category="+id+"&sid="+Math.random(); 
     ajaxku.onreadystatechange=stateChanged; 
     ajaxku.open("GET",url,true); 
     ajaxku.send(null); 
     } 

     function buatajax(){ 
     if (window.XMLHttpRequest){ 
      return new XMLHttpRequest(); 
     } 
     if (window.ActiveXObject){ 
      return new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return null; 
     } 

     function stateChanged(){ 
     var data; 
     if (ajaxku.readyState==4){ 
      data=ajaxku.responseText; 
      if(data.length>=0){ 
      document.getElementById("store").innerHTML = data 
      }else{ 
      document.getElementById("store").value = "<option selected>- Choose Store -</option>"; 
      } 
     } 
     } 
    </script> 

而且StoreAPIService.php这个代码:

session_start(); 
     $stores = array(); 

     $store_category_id = $_GET['category']; 

     try 
     { 
      //$client = new GuzzleClient(); 
      $response = $this->client->get('admin/store/bycat/rev/'.$store_category_id, 
       ['headers' => ['Authorization' => $_SESSION['login']['apiKey']] 
      ]); 

      $statusCode = $response->getStatusCode(); 
      // Check that the request is successful. 
      if ($statusCode == 200) 
      { 
       $error = $response->json(); 
       echo"<option value=''>- Choose Store -</option>"; 

       foreach ($error['stores'] as $store) 
       { 
        $mainStore = new StoreSummary(); 
        echo "<option value='{$mainStore->setStoreId($store['store_id'])};'>{$mainStore->setStoreName($store['store_name'])};</option>"; 
        array_push($stores, $mainStore); 
       } 
      } 
     } 

我没有错误,但我选择的“类别”商店没有出现。

任何人都可以请检查我是否出错。

感谢您的帮助。

+0

转到开发工具,进入网络选项卡,并检查Respo通过AJAX调用的第一部分来查看你回来的内容。 – Barmar 2015-03-03 07:52:30

回答

0

您试图更改下拉菜单的选项。我通过更改下拉菜单本身来做到这一点。
我创建一个div在html形式的id = “存储” 和使用改变的div的innerHTML AJAX

HTML表单

<select name="category" class="form-control" id="category" onchange="ajaxStore(this.value)"> 
     <option value="-1"> - Choose Category -</option> 
      <?php 
       $StoreCategoriesAPIAccessor = new StoreCategoriesAPIService(GuzzleClient::getClient()); 
       $stores = $StoreCategoriesAPIAccessor->getStoreCategories(); 
       foreach ($stores as $store):  
      ?> 
     <option value="<?php echo $store->getStoreCategoryId(); ?>"><?php echo $store->getCategory(); ?></option> 
      <?php endforeach; ?> 
    </select><label for="inputName" class="control-label">Store Name</label> 
     <div id="store"><select name="store" class="form-control"> 
    <option value="-1"> - Choose Store -</option> 
    </select> 
</div> <!--end of store --> 

Ajax代码

<!-- linking drop down AJAX --> 
    <script type="text/javascript"> 
     var ajaxku=buatajax(); 
     function ajaxStore(id){ 
     var url="objects/StoreAPIService.php?category="+id+"&sid="+Math.random(); 
     ajaxku.onreadystatechange=stateChanged; 
     ajaxku.open("GET",url,true); 
     ajaxku.send(null); 
     } 

     function buatajax(){ 
     if (window.XMLHttpRequest){ 
      return new XMLHttpRequest(); 
     } 
     if (window.ActiveXObject){ 
      return new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     return null; 
     } 

     function stateChanged(){ 
     var data; 
     if (ajaxku.readyState==4){ 
      data=ajaxku.responseText; 
      if(data.length>=0){ 
      document.getElementById("store").innerHTML = data 
      }else{ 
      document.getElementById("store").value = "<select name=\"store\" class=\"form-control\"> 
     <option value=\"-1\"> - Choose Store -</option> 
     </select>"; 
      } 
     } 
     } 
    </script> 

StoreAPIService.php:

session_start(); 
      $stores = array(); 

      $store_category_id = $_GET['category']; 

      try 
      { 
       //$client = new GuzzleClient(); 
       $response = $this->client->get('admin/store/bycat/rev/'.$store_category_id, 
        ['headers' => ['Authorization' => $_SESSION['login']['apiKey']] 
       ]); 

       $statusCode = $response->getStatusCode(); 
       // Check that the request is successful. 
       if ($statusCode == 200) 
       { 
        $error = $response->json(); 
        echo "<select name=\"store\" class=\"form-control\"> 
<option value=\"\">- Choose Store -</option>"; 

        foreach ($error['stores'] as $store) 
        { 
         $mainStore = new StoreSummary(); 
         echo "<option value='{$mainStore->setStoreId($store['store_id'])};'>{$mainStore->setStoreName($store['store_name'])};</option>"; 
         array_push($stores, $mainStore); 
        }//end of foreach 
        echo "</select>" 
       } 
      } 
+0

嗨兄弟,感谢您的回应,但它仍然没有工作.. 在商店的结果仍然下降 - 选择商店 - 你能帮助我吗? – Monk 2015-03-03 15:45:27

+0

_查看此bro_并尝试在脚本中逐步集成此代码[link](http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html) – 2015-03-04 13:02:04