動態國家，州，市下拉選擇

Question

我有1靜態（國家）和2動態（州和市）下拉選擇。

我正在使用Select2。

例如，荷蘭每個州都有大量的城市。 加載此操作很難。

在我使用側頁，如果有以下JS：

$(".state").change(function() 
    { 
     var id=$(this).val(); 
     var dataString = 'id='+ id; 

     $.ajax 
     ({ 
      type: "POST", 
      url: "../../get/get_city.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
      { 
       $(".city").html(html); 
      } 
     }); 
    }); 

get_city.php工作，看起來像：

if($_POST['id']) 
{ 
    $id=$_POST['id']; 

    $stmtc = $admin_home->runQuery("SELECT * FROM city WHERE state_id=:id"); 
    $stmtc->execute(array(':id' => $id)); 
    ?><option selected="selected">Selecteer een woonplaats:</option><?php 
    while($rowc=$stmtc->fetch(PDO::FETCH_ASSOC)) 
    { 
     ?> 
     <option value="<?php echo $rowc['city_id']; ?>"><?php echo $rowc['city_zip']; ?> <?php echo $rowc['city_name']; ?></option> 
     <?php 
    } 
} 

我還與AJAX已經嘗試從選擇2 seperatly使用此代碼（也正在）：

$('.itemName').select2({ 
     placeholder: 'Select an item', 
     ajax: { 
      url: '../../get/get_city_ajax.php', 
      dataType: 'json', 
      delay: 250, 
      processResults: function (data) { 
      return { 
       results: data 
      }; 
      }, 
      cache: true 
     } 
     }); 

get_city_ajax.php樣子：

$stmtc = $admin_home->runQuery("SELECT * FROM city " 
       . "WHERE city_name LIKE '%".$_GET['q']."%' LIMIT 10"); 
    $stmtc->execute(); 
     $json = []; 
    while($rowc=$stmtc->fetch(PDO::FETCH_ASSOC)) 
    { 
     $json[] = ['id'=>$rowc['city_id'], 'text'=>$rowc['city_name']]; 
    } 


echo json_encode($json); 

現在需要兩者的組合才能從選定狀態獲得城市。

我試了很多，但無法讓它工作。

Answer 1

該解決方案爲我工作得很好：

$(".state").change(function() 
    { 
     var id=$(this).val(); 
     var dataString = 'id='+ id; 
     $('.city').select2({ 

     placeholder: 'Selecteer een stad', 
     ajax: { 
      url: '../../get/get_city_ajax.php?'+dataString, 
      dataType: 'json', 
      delay: 250, 
      processResults: function (data) { 
      return { 
       results: data 
      }; 
      }, 
      cache: true 
     } 
     }); 
     });