根据其他选择填充选择

Question

我不明白如何根据我在第1次选择中所做的选择来填充第2个选择。 我想要做的是添加一个位置。要添加一个位置我有第一个select有4 options：大陆，国家，地区和城市。而且，如果例如I select这个城市类型，我想在我的第二个选择中只显示可以连接城市的区域。如果我选择了一个国家，比我想第二选择只显示大陆。

到目前为止，我有这样的：

<p><label for="type_id">Tip de locatie:</label><br /> 

<select class="styled" name="type_id" id="type_id"> 
    <option value="0">Alege...</option> 
    <?php 
    foreach ($place_type as $key => $type) { ?> 
     <option value="<?=$type['id']?>"><?=$type['name']?></option> 
    <?php } ?> 
</select> 
</p> 

<noscript> 
<input type="submit" name="action" value="Load Parents" /> 
</noscript> 

<p><label for="parent_id">Leaga de:</label> <br /> 

<select class="styled" name="parent_id" id="parent_id"> 
    <option value="0">Alege...</option> 
    <?php 
    foreach ($places as $key => $place) { ?> 
     <option value="<?=$place['id']?>"><?=$place['name']?></option> 
    <?php } ?> 
</select> 
</p> 

我使用笨的框架，我已经在控制器此方法：

public function get_place_parent() 
{ 
    $this->load->model('places_model'); 
    $places = $this->places_model->get_places(); 
    $places = json_encode($places); 
    return $places; 
} 

和jQuery的

<script type="text/javascript" charset="utf-8"> 
$(function(){ 
    $("select#type_id").change(function(){ 
    $.getJSON("<?=site_url('admin/get_place_parent')?>",{type_id: $(this).val(), ajax: 'true'}, function(j){ 
     var options = ''; 
     for (var i = 0; i < j.length; i++) { 
     options += '<option value="' + i + '">' + j[i] + '</option>'; 
     } 
     $("select#parent_id").html(options); 
    }) 
    }) 
}) 
</script> 

我真的不明白如何做到这一点。它基于本教程：http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

预先感谢您！

Answer 1

请按照下列步骤操作

1）当你选择一个选择框城市类型，你需要做出的onChange事件的Ajax调用。

2）将选定城市的ID传递给控制器​​功能。

3）从DB或任何地方获取城市的区域。

4）然后你可以在控制器函数本身构造你的选项，或者你可以将它传递给Ajax函数，并在那里构造你的选项。

5）在区域选择框中添加构造的选项。

Answer 2

请重申此链接，这与您的要求类似，它会在选择国家/地区时填充状态下拉菜单。

How to use AJAX to populate state list depending on Country list?

Answer 3

下面是从我的应用程序已经做了你是什么之后的一个片段。

companyNames是第一个下拉列表的编号，即与我们注册的公司列表。当它改变时，它会对admin/getAddresses函数进行ajax调用，并从companyNames下拉列表中发送该ID。我也包含了控制器的功能，你可以把它看作与你的应用无关的模型。

控制器然后返回一个json响应，第二个下拉列表中的数据由ajax cotnrol中的成功函数填充。首先它会删除已经存在的任何选项（否则每次更改第一个下拉列表时都会继续添加），然后它会从控制器返回的json中追加新选项。

查看

$(document).on("change", "#companyNames", function() { 
    $row = $(this).closest('tr'); 
    $.ajax({ 
     type: "GET", 
     url: "<?=base_url()?>admin/getAddresses/", 
     data: $row.find('input,select').serialize(), 
    dataType: "json", 
     success: function(content) { 
      if (content.status == "success") { 
      $("#companyAddresses").find('option').remove(); 
      $.each(content.message, function(key, val) { 
      $("#companyAddresses").append(
      '<option value="' + key + '">' + val + '</option>' 
      ); 
      }); 
      } else {     
       $("#error").html('<p>'+content.message+'</p>'); 
      } 
     } 
    }); 
    return false; 
}); 

控制器

public function getAddresses() 
{ 
    $data = $this->input->getArray(); 
    $this->load->model('companies'); 
    $data['companyAddresses']=$this->companies->getCompanyAddresses($data['addCompany']); 
    print json_encode(array("status"=>"success", "message"=>$data['companyAddresses'])); 
}