根据其他选择填充选择答案

【问题标题】：Populate a select based on other select根据其他选择填充选择
【发布时间】：2012-12-24 20:08:43
【问题描述】：

我不明白如何根据我在第一次选择中所做的选择来填充第二次选择。我想要做的是添加一个位置。要添加一个位置，我有第一个 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/

提前谢谢你！

【问题讨论】：

I don't really understand 只是广义的声明。需要提供具体问题....哪一部分你不明白？您的代码的哪一部分有效或无效？

标签： php jquery json codeigniter

【解决方案1】：

下面是我的一个应用程序的 sn-p，它完全符合您的要求。

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

然后控制器返回一个 json 响应，其中包含第二个下拉列表的数据，该下拉列表由 ajax 控制中的成功函数填充。首先，它会删除已经存在的所有选项（否则每次更改第一个下拉菜单时都会继续追加），然后它会从控制器返回的 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']));
}

【讨论】：

嗨！谢谢你的时间！我试过但没有用。我一定做错了什么。它如何将 id 发送给控制器？
带url的那一行是控制器函数的地址。所以你可以把控制器函数地址放在那里，就像它是一个普通的函数调用一样。 url: "=base_url()?>admin/getAddresses/",

【解决方案2】：

请按照以下步骤操作

1) 当您从选择框中选择城市类型时，您需要在其 onChange 事件中进行 Ajax 调用。

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

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

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

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

【讨论】：