AJAX PHP: динамический выпадающий список с использованием AJAX

Question

Сегодня я отправил код с динамическим списком вниз.

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

Это форма:

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

Я не получил сообщение об ошибке, но Магазин с «Категория», который я выбираю, не появляется.

Может кто-нибудь, пожалуйста, проверьте, не поступил ли я неправильно.

спасибо за помощь.

Answer 1

Вы пытались изменить параметры выпадающего меню. Я сделал это, изменив меню выпадающего меню.
Я создал DIV с идентификатором = "магазин" в виде HTML и изменения innerHTML в DIV с помощью 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>" 
       } 
      }