基于其他选择填充一个选择 - Populate a select based on other select

我不明白如何根据我在第一次选择中所做的选择来填充第二次选择。我要做的是添加一个位置。要添加位置，我有第一个select，它有4个options:大陆，国家，地区和城市。并且，例如，如果我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>

我正在使用codeigniter框架，我在控制器中有这个方法:

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/

提前感谢!

下面是我的一个应用程序的代码片段，它正是您所需要的。

companyNames是第一个下拉列表的id，它是在我们这里注册的公司列表。当更改时，它对admin/getAddresses函数进行ajax调用，并从companyNames下拉列表中发送id。我也包括了控制器功能，你可以找出模型，因为它与你的应用程序无关。

然后，控制器返回一个json响应，其中包含ajax控件中的成功函数填充的第二个下拉列表的数据。首先，它会删除已经存在的任何选项(否则每次更改第一个下拉菜单时都要添加)，然后它会从控制器返回的json中添加新选项。 <<p> 视图/strong>
$(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'])); }

请按照以下步骤操作

1)当你从选择框中选择一个城市类型时，你需要在它的onChange事件中进行Ajax调用。

2)将选定城市的id传递给控制器函数。

3)从DB或任何地方获得城市的区域。

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

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