动态国家，州，市下拉选择

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